Jupyter笔记本下拉宽度

Question

我使用ipywidgets下拉类在Jupyter笔记本中放置一个下拉小部件，如下所示：

import ipywidgets as widgets
from IPython.display import display

ids = ['This is a very long string that is too long for the box',
      'This is another very long string that is too long as well',
      'The more, the merrier: One last long string that identifies something']

current = widgets.Dropdown(options=ids, value=ids[0],
                           description='Current dataset:', width='500px')
display(current)

下拉字段本身对于长字符串来说足够宽，但是当打开选项列表时，此列表的宽度太小而且也没有遵循给定的宽度＆＃39;声明中的参数（见图）。

有没有办法为下拉菜单设置选项列表的宽度？我希望它足够宽以显示整个字符串。

Answer 1

我将问题追溯到CSS属性width:calc(275px)：

.dropdown-menu{
  max-height:200px;
  overflow:hidden;
  overflow-y:auto;
  width:calc(275px)
}

这是extension.js <install_dir>/anaconda/share/jupyter/nbextensions/jupyter-js-widgets中的width。删除<Grid> <ScrollViewer> <ItemsControl> <ItemsControl.Resources> <Style x:Key="col" TargetType="WrapPanel"> <Setter Property="Orientation" Value="Vertical"/> <Setter Property="ItemWidth" Value="80"/> </Style> <Style x:Key="content" TargetType="Border"> <Setter Property="Margin" Value="5,5"/> </Style> <Style x:Key="small" TargetType="Border" BasedOn="{StaticResource content}"> <Setter Property="Background" Value="Orange"/> <Setter Property="Height" Value="30"/> </Style> <Style x:Key="medium" TargetType="Border" BasedOn="{StaticResource content}"> <Setter Property="Background" Value="Green"/> <Setter Property="Height" Value="70"/> </Style> <Style x:Key="large" TargetType="Border" BasedOn="{StaticResource content}"> <Setter Property="Background" Value="Red"/> <Setter Property="Height" Value="110"/> </Style> <Style x:Key="2col6items" TargetType="WrapPanel" BasedOn="{StaticResource col}"> <Setter Property="Height" Value="240"/> </Style> <Style x:Key="3col6items" TargetType="WrapPanel" BasedOn="{StaticResource col}"> <Setter Property="Height" Value="200"/> </Style> <Style x:Key="4col6items" TargetType="WrapPanel" BasedOn="{StaticResource col}"> <Setter Property="Height" Value="120"/> </Style> <Style x:Key="5col6items" TargetType="WrapPanel" BasedOn="{StaticResource col}"> <Setter Property="Height" Value="80"/> </Style> </ItemsControl.Resources> <!-- first row --> <WrapPanel Style="{StaticResource 5col6items}"> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource small}"/> <Border Style="{StaticResource small}"/> </WrapPanel> <!-- second row --> <WrapPanel Style="{StaticResource 4col6items}"> <Border Style="{StaticResource large}"/> <Border Style="{StaticResource large}"/> <Border Style="{StaticResource large}"/> <Border Style="{StaticResource small}"/> <Border Style="{StaticResource small}"/> <Border Style="{StaticResource small}"/> </WrapPanel> <!-- third row --> <WrapPanel Style="{StaticResource 3col6items}"> <Border Style="{StaticResource large}"/> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource large}"/> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource large}"/> </WrapPanel> <!-- fourth row --> <WrapPanel Style="{StaticResource 2col6items}"> <Border Style="{StaticResource large}"/> <Border Style="{StaticResource large}"/> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource small}"/> <Border Style="{StaticResource medium}"/> <Border Style="{StaticResource small}"/> </WrapPanel> </ItemsControl> </ScrollViewer> </Grid> 属性可解决问题。我试着在GitHub查看源代码，但无法弄清楚它来自何处。