自动调整IPython小部件布局

我创建了一个交互式jupyter notebook与ipython widgets并希望用户从一定数量的复选框中进行选择。我使用下面的代码来显示包含复选框的HBox。自动调整IPython小部件布局

num_checks = 10 

cb_cont = widgets.HBox(background_color='red',height='100px',width='100%') 

checkboxes = [] 
for f in range(num_checks): 
    checkboxes.append(\ 
     widgets.Checkbox(description = 'Checkbox [%d]'%(f), \ 
         value=False, width=50)) 

cb_cont.children=[i for i in checkboxes] 
display(cb_cont)

这里是从上面的代码的输出的屏幕截图：

正如你可以看到，箱溢出的内容和超出容器的宽度。

我可以通过将overflow_x属性设置为以下值之一来更改行为：['visible', 'hidden', 'scroll', 'auto', 'initial', 'inherit', '']。

例如，cb_cont.overflow_x = 'scroll'结果在下面的输出窗口：

在其内容不溢出而变得不可见，并且可以滚动。

如何设置框的属性以可视化不符合换行符的内容？

很显然，我可以使用多个HBox对象每一个包含适合的窗口大小复选框的最大数目，但是，这不是一组的原因想要的解决方案：

根据屏幕上该数字可能会改变的分辨率
从中选择的复选框的数量取决于以前的计算，并且事先不知道。

来源

2016-03-08 Matteo

您可以使用百分比宽度（和高度）：

cb_cont = widgets.HBox(background_color='red',height='100px',width='100%')

，并设置cb_cont.overflow_x = 'auto'

来源

2016-04-17 15:58:05

我是有小部件，并且具有各种框属性周围玩弄后，同样的问题，这里是我想出的：

您需要设置以下属性：

display： '内联-FLEX'
flex_flow： '行包'

这与任意数量的复选框的工作对我来说（我试过最多100个）。另一方面，设置height属性不是很有用。您需要根据复选框的数量或屏幕分辨率调整高度。

import ipywidgets as widgets 
from ipywidgets import * 
from IPython.display import display 

num_checks = 50 

cb_cont = HBox(layout=Layout(width='100%',display='inline-flex',flex_flow='row wrap')) 
#cb_cont.overflow_x = 'scroll' 

checkboxes = [] 
for f in range(num_checks): 
    checkboxes.append(\ 
     widgets.Checkbox(description = 'Checkbox [%d]'%(f), \ 
        value=False, width=50)) 

cb_cont.children=[i for i in checkboxes] 
display(cb_cont)

来源

2016-09-06 12:41:24 Ely

我一直在玩Flex_flow和flex_wrap属性一段时间，并且无法使项目包含项目时下拉元素的项目。它只适用于像按钮等其他元素。你的答案工作，并在现场！谢谢！ –

自动调整IPython小部件布局

回答

相关问题