New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make label width configurable #1376

merged 6 commits into from May 22, 2017


None yet
3 participants

jasongrout commented May 22, 2017

This implements the ideas behind #1373. The idea is that the current label width is still too brittle - we have a min and a max width, but it's too hard to get something much smaller or larger. This introduces a description_width style attribute which lets you easily set the width. As part of this, I eliminated the max-width on the label, since now it is very easy to extend the width of a label. For example, style=dict(description_width='initial') makes the label be exactly as long as the text.

This also affects the checkbox indent. @maxnoy - what do you think about description_width affecting the checkbox indent width? It seems a bit confusing that description_width affects the width of the indent, not the text.

from ipywidgets import *
widgets = []
widgets.append(IntSlider(description='slide', style=style))
widgets.append(Dropdown(description='drop', style=style))
widgets.append(Checkbox(description='check', style=style))

screen shot 2017-05-22 at 11 48 04 am

@@ -37,8 +38,15 @@ def remove_class(self, className):
return self
class DescriptionStyle(Style, Widget):
"""Button style widget."""
_model_name = Unicode('SliderStyleModel').tag(sync=True)

This comment has been minimized.


blink1073 May 22, 2017



This comment has been minimized.


jasongrout May 22, 2017


Yep, thanks.

jasongrout added some commits May 22, 2017

Fix class name.
Thanks to @blink1073 for pointing this out.
Make the description label an HTML label element.
Also, set the ‘for’ attribute correctly for accessibility.

This comment has been minimized.


jasongrout commented May 22, 2017

Opening another issue for discussion on the label width: #1377.

@jasongrout jasongrout merged commit d771e99 into jupyter-widgets:master May 22, 2017

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed

@jasongrout jasongrout added this to the 7.0 milestone May 22, 2017

@jasongrout jasongrout referenced this pull request May 22, 2017


Update Changelog #1279


This comment has been minimized.


maxnoy commented May 23, 2017

@jasongrout, this seems like very useful functionality. Maybe if there was a notion of description_width vs content_width, it would be a bit clearer?


This comment has been minimized.


jasongrout commented May 23, 2017

I think we usually have the widgets automatically expand the content width, so there is a correlation between widget width and content width (i.e., to make the content wider, just make the widget wider).

Can we just handle this in documentation, with the explanation that the checkbox description is on the right?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment