Change the size of the label in an IPython noteboo

Question

This is really a trivial problem, but it is still annoying. I'm writing a tool to allow a user to set a bunch of numerical parameters for an analysis in the IPython notebook. I've set it up as a bunch of FloatTextWidgets in a ContainerWidget. They have rather long labels like "Number of Posture Points" or "Background Disk Radius". They don't line up nicely. This is because of the length: as explained on this page, "The label of the widget has a fixed minimum width. The text of the label is always right aligned and the widget is left aligned... If a label is longer than the minimum width, the widget is shifted to the right."

My labels exceed the "fixed minimum width". What I want to know is how to change it. I have poked around in the Widget source code, and I can't find this anywhere.

EDIT: In response to @Jakob, here is some code, and here is a screenshot

In this example, "Threshold:" is small enough to fit within the label width, but all the others are too long.

Answer 1

To change the style from within the notebook:

from IPython.display import HTML, display

display(HTML('''<style>
    .widget-label { min-width: 20ex !important; }
</style>'''))

Answer 2

Well, I found the narrow answer to my question: the minimum field width is defined in site-packages/IPython/html/static/style/ipython.min.css (located wherever your python libraries live -- on my Max that is /Library/Python/2.7/), where widget-hlabel is defined by

.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}

min-width:10ex is the relevant part.

Although one can override this for an entire document, I don't see an easy way to change it one widget at a time. It would have to be done on the JavaScript side, since the FloatTextWidget class doesn't give separate access to the label component of the Widget from the python side. That would require developing a custom widget subclassed from FloatTextWidget, which seems like way too much effort for such a simple problem, and fragile to boot. At least, that's the only way I see to do it -- corrections welcome.

Instead, I have decided to eschew altogether the automatic labeling of widgets with their descriptions, and instead construct each label as an HTMLWidget, which gives me complete control over its appearance. Here's what that looks like:

Answer 3

use the layout argument for each widget. Here's the link to the documentation: https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html In particular it says, you an define description and widget separately in an HBox like this:

    from ipywidgets import HBox, Label, Layout
    label_layout = Layout(width='100px',height='30px')
    HBox([Label('A description',layout=label_layout), IntSlider()])