jupyter-widgets / ipywidgets

Interactive Widgets for the Jupyter Notebook
https://ipywidgets.readthedocs.io
BSD 3-Clause "New" or "Revised" License
3.17k stars 949 forks source link

widget label `box` does not adapt size, forces labels to wrap #714

Closed shackenberg closed 8 years ago

shackenberg commented 8 years ago

I have the issue that the boxes that contain the labels for the widgets a very narrow, so that the label wraps. I remember that this did not happen in older version, but could not reproduce it. screen shot 2016-08-15 at 11 47 10

MWE code:

def f(very_very_very_long_string):
    return very_very_very_long_string
widgets.interact(f, very_very_very_long_string=True)
widgets.interact(f, description="very_very_very_long_string", 
                 very_very_very_long_string=True)
widgets.interact(f, very_very_very_long_string=10)
widgets.interact(f, very_very_very_long_string=('orange', 'apple'))

Sorry, if this is a know issue, I searched for box and width but did not find any matching issues.

Versions:

import ipywidgets; ipywidgets.__version__
'5.2.2'
!python -c "import IPython; print(IPython.sys_info())"
{'commit_hash': u'c963f6b',
 'commit_source': 'installation',
 'default_encoding': 'UTF-8',
 'ipython_path': '/home/ludwig/anaconda2/envs/kaleyedoscope/lib/python2.7/site-packages/IPython',
 'ipython_version': '4.2.0',
 'os_name': 'posix',
 'platform': 'Linux-3.13.0-53-generic-x86_64-with-debian-jessie-sid',
 'sys_executable': '/home/ludwig/anaconda2/envs/kaleyedoscope/bin/python',
 'sys_platform': 'linux2',
 'sys_version': '2.7.12 |Anaconda custom (64-bit)| (default, Jul  2 2016, 17:42:40) \n[GCC 4.4.7 20120313 (Red Hat 4.4.7-1)]'}
hainm commented 8 years ago

You can check styling

http://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html

shackenberg commented 8 years ago

Thanks for the link hainm. Buried in the 'Latex' paragraph I actually found confirmation for the issue I ran into:

You may have noticed that the slider length is shorter in presence of a description. This because the description is added inside of the Slider total length. You cannot change the width of the internal description field.

I am pretty sure that was not the case in older versions, but I assume, that it was a necessary change to improve other things. 😔

If I find the time I'll create a pull request for the documentation, so that it is easier found.

SylvainCorlay commented 8 years ago

I am pretty sure that was not the case in older versions, but I assume, that it was a necessary change to improve other things. 😔

The reason is that we wanted widgets to have a natural width so that they can align correctly in combinations of HBoxes and VBoxes, but since you are not the only person to complain about this, I am considering another solution for 6.0: instead of having a fixed width for the description, let it take all the space available up-until the max-width of the entire widget is reached by description + widget + readout.

In this way, you will be able to enable longer descriptions by changing layout.width of your widget.

shackenberg commented 8 years ago

Dear Sylvain Corlay, thank you for your explanation. As said I assumed it was done for a reason, but if your proposed change is easily done and would not hurt current or future progress, I am all up for it, as it makes my notebook's code simpler. But if this is not the case, I would be already happy with better documentation.

SylvainCorlay commented 8 years ago

The widget styling notebook provides multiple examples on how to create a number of common reactive layouts with ipywidgets (forms, caroussel). You should check it out.

shackenberg commented 8 years ago

Yes, I saw that, but it all looks a little bit more complicated than the code I already have which worked 'out of the box'. But I will look into it.

On another note. Could it be that all widgets are 'affected' not only Slider? Even ToggleButton has issues with too long description strings. screen shot 2016-08-22 at 16 02 35

SylvainCorlay commented 8 years ago

I don't think that buttons or anywidgets should lengthen by default with the content - but only if you set the layout.width to auto.

In your example, I think that we should have overflow hidden by default.

hainm commented 8 years ago

I am considering another solution for 6.0: instead of having a fixed width for the description, let it take all the space available up-until the max-width of the entire widget is reached by description + widget + readout.

this would be great. +1.

shackenberg commented 8 years ago

Now that the documentation is updated, I have nothing against closing the issue, but that is of course up to you. cheers

SylvainCorlay commented 8 years ago

Closing.