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

Widgets
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