Ipywidgets: document how to extend length of labels

[weichm]

Original title: selectionrangeslider: too short, cuts off labels

import pandas as pd
import datetime
import ipywidgets as widgets

start = datetime.datetime(2017,1,1)
end = datetime.datetime(2017,12,31)

dates = list(pd.date_range(start, end, freq='D'))
options = [(i.strftime('%d.%m.%Y'), i) for i in dates]
index = (0, len(dates)-1)
widgets.SelectionRangeSlider(
    options = options,
    index = index,
    description = 'Test',
    orientation = 'horizontal'
)

The widget is displayed as

The last part of the end date is incorrectly cut off.

Same problem if slider is oriented vertical.

ipywidgets.__version__ is 7.0.1 and jupyter-notebook --version is 5.2.0.

Is there some workaraound?
Thanks!

[pbugnion]

Thanks for raising this.

A workaround for this would be to specify an absolute width for the slider:

widgets.SelectionRangeSlider(
    options=options,
    index=index,
    description='Test',
    orientation='horizontal',
    layout={'width': '500px'}
)

Beyond workarounds, I am not sure if expanding the label size depending on the options was part of the design. I could see that getting very tricky if the label strings have very different lengths.

[weichm]

Thanks, that worked for me!

However, I don't close this issue, as I consider it a bug?

[jasongrout]

It's a bit tricky, in that we made the tiling design of widgets and the size of the label for the slider before we had a selection range slider. We don't know how big the item text will be, so we can't easily make it always work and still have widgets tile nicely. So we have a default width for the slider, and make it easy to make it bigger if the things you are selecting have wider text.

So I would say it's a limitation of our current design with an accepted workaround more than a bug.

[jasongrout]

It sounds like we should add a note to the docs about the workaround.

[peristeri]

@jasongrout I'm interested on working this issue. I was thinking of introducing a styling section in the Embedding Jupyter Widgets in Other Contexts than the Notebook page.

[jasongrout]

@peristeri - that would be great! I think a natural place for it would be in this section of the documentation: http://ipywidgets.readthedocs.io/en/stable/examples/Widget%20Styling.html#Description (that's in this notebook: https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/examples/Widget%20Styling.ipynb)

[alfredo-gimenez]

Unfortunately this fix doesn't work for me--looks like the width of the slider occupies a fixed percentage of the layout width, so with a long enough string it still gets cut off.

Alternatively, is there a way to put the range values below the slider?

[labodyn]

Fix does not work for me, same issue.

[LeoWu1993]

Same issue