Vertically Layout widgets with scrolling

1,061 views
Skip to first unread message

zinc1oxide

unread,
Jul 1, 2017, 11:11:07 AM7/1/17
to Project Jupyter
Environment:
  • Python 3.6.1
  • ipywidgets 6.0.0
I'm trying to create a simple scrolling region that allows me to load multiple Checkbox widgets with a readable layout.  Based on some examples, I can do something horizontally such as:


When I attempt to do this vertically within a specific region, I'm unable to find the right combination of Layout controls to do this:


I have tried a number of combinations, but I'm getting to the point where I am guessing.  Any help would be appreciated,
thanks.


Jason Grout

unread,
Jul 1, 2017, 5:01:46 PM7/1/17
to Project Jupyter
Thanks for posting this.

What is going on here is that the VBox has display: flex, and by default the children (the checkboxes) have flex-shrink: 1. This means that they will try to shrink (vertically, since it's a vertical flex layout) to fit the space. I played with some options by right clicking the checkbox in Chrome and choosing "Inspect", and then modifying the CSS. There's a number of ways to deal with this:

1. Set the VBox layout.display to something other than 'flex' (for example, 'block')
2. For each checkbox, set the layout.flex to '0 0 28px' (that sets the flex-shrink factor to 0 and the natural height to 28px, matching its normal size). (Note that you can create one Layout instance that you then use for all of the checkboxes)
3. For each checkbox, set the layout.min_height to '28px' to force it to be at least that high

Thanks,

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/f1b1ea9a-c7cc-41e1-9cd6-b19fae7e0e53%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

zinc1oxide

unread,
Jul 1, 2017, 10:10:59 PM7/1/17
to Project Jupyter, ja...@jasongrout.org
Thanks Jason for the suggestions - exactly what I needed.  This was the net result based on your advice:

Much better result.


thanks again.

Reply all
Reply to author
Forward
0 new messages