How can I set the height of a pywidgets.Text?

Widgets
1

am trying to set the height of a Text widget (ipywidgets).
I tried something like that:

from ipywidgets import Text, Layout
Text('test', layout=Layout(height='15px'))

but, it doesn’t shrink the height of the Text widget frame, nut instead it just shows the frame cropped:

image

Would appreciate help / guidance!

2

use HBox instead of Text

3

Indeed, the layout stuff works quite predictably for the Box subclasses, and is fine for the overall layout. As it’s an InstanceDict, you can actually just give it something like dict(height="15px")… but that won’t work here, as there are rules which apply to elements inside the widget (e.g. labels, actual inputs), and have very specific selectors.

To find what rules are actually effective, the Elements tab from the developer tools (usually under the f12 key), dig all the way down into the actual text box. For example, my local chromium:

image
image1920×512 107 KB

With that in hand, one can take full control over all the best-effort pre-defined stuff with:

  • defining _dom_classes to avoid stomping on unstyled widgets
  • an HTML to emit a custom <style> tag, scoped to the custom classes
    • note this actually has to be displayed to be effective
    • it’s usually easiest to use the “bad manners” !important keyword
from ipywidgets import Text, Layout, HTML
display(HTML("""
<style>
.my-short-text input {
    height: 15px !important;
    padding: 0 !important;
}
</style>
"""))
Text('test', _dom_classes=["my-short-text"])

or

image
image782×471 33.4 KB

Or go further, and define a reusable subclass:

from traitlets import default
class ShortText(Text):
    @default("_dom_classes")
    def _default_dom_classes(self):
        return ["my-short-text"]

ShortText("test")

image
image777×369 28.6 KB

Note that that HTML would need to already displayed on the page… there are some patterns with e.g. @staticmethod to ensure this is the case, but again, if you’re “just” tweaking styles in a notebook, it might be overkill.

2 Likes
4

Can we add a customised style or just use the available once?If i am willing to add colour for the text
then can i add?

5

Inside the <style> tag, pretty much anything works. It’s possible to prototype by direct manipulation in the developer tools (which has nice color pickers, etc), then copy those changes into the HTML’s value.

One can even build these kind of experiences out of widgets:

image
image1385×988 107 KB

2 Likes
6

Is there any documentation available for reference??

7

The public feature is DOMWidget.add_class, though there are some uses of _dom_classes sprinkled in the docs.

The most authoritative, yet still mostly approachable source for CSS docs in general is MDN, which has links to the underlying W3C specs (which are… dense). However, interactive exploration in browser developer tools is really quite good these days.

2 Likes
8

Exactly what can come in the style tag??There is javascript in the first code and python functions in the second code?

9

While the ipywidgets.HTML can hold any block-level element (for reference, it’s created inside a <div> tag), <style> tags can only hold CSS directives. In the second case, it is demonstrating using Python string formatting to react to client changes to update the value: no custom JS here.

In an HTML, JS <script> tags will either get stripped, or generally won’t work reliably without a framework like anywidget… but this opens up many other cans of worms, such as reliance on 3rd party CDN.

1 Like