widget Layout / alignment within a Box

1,331 views
Skip to first unread message

zinc1oxide

unread,
Jul 2, 2017, 12:47:26 PM7/2/17
to Project Jupyter
Environment:
  • Python: 3.6.1
  • ipywidgets: 6.0.0

Hi, I'm working within a Box widget that contains Checkbox widgets.  I can't seem to find the proper layout settings to get the widgets to horizontally align.  This is what I'm working with:  (Note: I do have to keep my display: 'block' setting in order to properly display my widgets vertically).


Code snippet:

items = ['Item 1', 'Item 2 - long', 'Item 3 - longer', 'Item 4 - the longest']
checkbox_items
= [Checkbox(description=name) for name in items]
container_layout
= Layout(overflow_y='auto', display='block', height='120px',border='1px solid black', width='200px')
VBox(children=checkbox_items, layout=container_layout)

There seems to be some attempt of formatting by default.  The first 2 widgets within the display appear to be right aligned.  However, things seem to fall off as we increase the text length.  I don't know how to control this.

thanks.

Jason Grout

unread,
Jul 5, 2017, 10:50:04 AM7/5/17
to Project Jupyter
(1) We've changed checkboxes in ipywidgets 7 to have the checkbox first, rather than the label, to be consistent with standard checkbox practices
(2) In ipywidgets 6, the label is right aligned, but a slightly longer label will push the checkbox over just a bit, rather than cut off the label. If the label is really long, it will be cut off with an ellipsis.
(3) ipywidgets 7 allows you to control exactly how wide the label is, which defaults to a single fixed width.

Do you want the actual check controls to align? I suggest just making sure your text is not too long in ipywidgets 6.

Jason


--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+u...@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/331c5222-68c1-4058-a97e-be60e79f5839%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

zinc1oxide .

unread,
Jul 5, 2017, 12:06:39 PM7/5/17
to jup...@googlegroups.com
Hi Jason,

Thanks for the reply.

>>> Do you want the actual check controls to align? I suggest just making sure your text is not too long in ipywidgets 6.

I would like the checkbox  to right align.  Unfortunately, I don't have control over the text and I need to display in full.  As an FYI, they are names of people, so they really are not that long.  I certainly could cut off the text to be a certain size but it seems the alignment gets thrown off when the lengths really aren't that long.  For example, the text above "Item 2 - long" vs "Item 3 - longer" is the beginning point of where the alignment starts to change.

I could try to use ipywidgets 7 - is it available?  I just tried an upgrade and still showing 6.0.0.

On Wed, Jul 5, 2017 at 10:49 AM, Jason Grout <ja...@jasongrout.org> wrote:
(1) We've changed checkboxes in ipywidgets 7 to have the checkbox first, rather than the label, to be consistent with standard checkbox practices
(2) In ipywidgets 6, the label is right aligned, but a slightly longer label will push the checkbox over just a bit, rather than cut off the label. If the label is really long, it will be cut off with an ellipsis.
(3) ipywidgets 7 allows you to control exactly how wide the label is, which defaults to a single fixed width.

Do you want the actual check controls to align? I suggest just making sure your text is not too long in ipywidgets 6.

Jason


On Sun, Jul 2, 2017 at 12:47 PM zinc1oxide <zinc1...@gmail.com> wrote:
Environment:
  • Python: 3.6.1
  • ipywidgets: 6.0.0

Hi, I'm working within a Box widget that contains Checkbox widgets.  I can't seem to find the proper layout settings to get the widgets to horizontally align.  This is what I'm working with:  (Note: I do have to keep my display: 'block' setting in order to properly display my widgets vertically).


Code snippet:

items = ['Item 1', 'Item 2 - long', 'Item 3 - longer', 'Item 4 - the longest']
checkbox_items
= [Checkbox(description=name) for name in items]
container_layout
= Layout(overflow_y='auto', display='block', height='120px',border='1px solid black', width='200px')
VBox(children=checkbox_items, layout=container_layout)

There seems to be some attempt of formatting by default.  The first 2 widgets within the display appear to be right aligned.  However, things seem to fall off as we increase the text length.  I don't know how to control this.

thanks.

--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+unsubscribe@googlegroups.com.

To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/331c5222-68c1-4058-a97e-be60e79f5839%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to a topic in the Google Groups "Project Jupyter" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/jupyter/c3ThmuDKiMA/unsubscribe.
To unsubscribe from this group and all its topics, send an email to jupyter+unsubscribe@googlegroups.com.

To post to this group, send email to jup...@googlegroups.com.
Reply all
Reply to author
Forward
0 new messages