Ipywidgets: Width for dropdown list and description labels

[jasongrout]

From https://github.com/jasongrout/ipythonwidgets/issues/2:

Hello,
I have been struggling for days on trying to find out a way to:

1. adjusting the width of the dropdown list to the content of the list (long strings in my case);
2. increasing the width of the description label (for RadioButtons) in order to see the label on one single line only.

I would be very grateful to receive your help.
Warm regards,
Graziella

[jasongrout]

I appreciate you've been trying to figure this out yourself. Feel free to post a question before struggling for days - often a quick pointer from us can save you a lot of time!

For adusting the width of the dropdown, you can explicitly set the width, or you can set width to initial, which right now makes it expand to the width of the output:

from ipywidgets import *
Dropdown(layout={'width': 'initial'}, options=['very very very very very very very very very very very very very very long option', 'another option'])

For setting the width of the description label, you can set the description_width style attribute:

from ipywidgets import *
RadioButtons(description='Some long description', style={'description_width': 'initial'}, options=['a', 'b', 'c'])

(setting the description width is described in the docs at http://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html#Description)

[moradza]

Is there a way to decrease size of the options boxes? The boxes that I use is larger than what I need.
Example

widgets.Dropdown(
            options=[('Y', 1), ('X', 2)],
            value=1,
            description='Type:', style=style)

[jasongrout]

Try this:

widgets.Dropdown(
            options=[('Y', 1), ('X', 2)],
            value=1,
            description='Type:', layout={'width': 'max-content'})

See https://developer.mozilla.org/en-US/docs/Web/CSS/width#max-content

[adam-ah]

@jasongrout thanks for the tip, this is what I was looking for.
Could we make layout={'width': 'max-content'} the default? I cannot imagine a scenario where a crippled radio button is better than a wide, readable one.
Thoughts?

[jasongrout]

We've designed the widgets' widths so that they lay out nicely with each other for common cases (they all have approximately the same width), but made it possible to adjust that if necessary.

[adam-ah]

@jasongrout I can appreciate that, although some may argue that they are far too narrow for everyday use (in my case, more than half of the radio selectors I use get crippled due to width issue, even though my strings are not that long).

In any case, if the width is fixed, do you think it would be possible to add this layout={'width': 'max-content'} to the examples of radios/dropdowns so it's easier to find?

widgets.RadioButtons(
    options=['pepperoni', 'pineapple', 'anchovies'],
#    value='pineapple',
    description='Pizza topping:',
#    layout={'width': 'max-content'}, # Uncomment if your content gets wrapped
    disabled=False
)

I had to find this GitHub issue via Google to enable this easy fix, so I'm somewhat certain that others would be struggling with this too.

[jasongrout]

do you think it would be possible to add this layout={'width': 'max-content'} to the examples of radios/dropdowns so it's easier to find?

Absolutely! We definitely need better documentation.

And we're open to redesigning how the widgets fit together, or re-examining the tradeoffs and compromises. It's just that a redesign should probably be done comprehensively so that things stay consistent with the overall design goals.

[jasongrout]

do you think it would be possible to add this layout={'width': 'max-content'} to the examples of radios/dropdowns so it's easier to find?

Do you want to make a PR?

[adam-ah]

I was expecting that you would say that, @jasongrout :)
Done.

[vidartf]

Is this closed by #2735 then?

[jasongrout]

Yes, I think so. Thanks @adam-ah!