更改 IPython 笔记本小部件中标签的大小答案

【问题标题】：Change the size of the label in an IPython notebook widget更改 IPython 笔记本小部件中标签的大小
【发布时间】：2014-11-24 21:46:33
【问题描述】：

这确实是一个微不足道的问题，但仍然很烦人。我正在编写一个工具，允许用户在 IPython 笔记本中设置一组用于分析的数值参数。我将它设置为FloatTextWidgets 中的一堆ContainerWidget。它们有相当长的标签，例如“姿势点数”或“背景磁盘半径”。他们排列不整齐。这是因为长度：如this page 中所述，“小部件的标签具有固定的最小宽度。标签的文本始终右对齐，小部件左对齐......如果标签长于最小宽度，小部件向右移动。”

我的标签超出了“固定的最小宽度”。我想知道的是如何改变它。我在小部件源代码中四处寻找，但在任何地方都找不到。

编辑：回复@Jakob，here is some code，这是截图

在此示例中，“阈值：”足够小以适合标签宽度，但所有其他都太长。

【问题讨论】：

你能提供一些代码吗？
@Jakob：我添加了一些代码的链接和屏幕截图。

标签： widget ipython ipython-notebook

【解决方案1】：

从笔记本中更改样式：

from IPython.display import HTML, display

display(HTML('''<style>
    .widget-label { min-width: 20ex !important; }
</style>'''))

【讨论】：

这里是another procedure。

【解决方案2】：

好吧，我找到了我的问题的狭义答案：最小字段宽度在 site-packages/IPython/html/static/style/ipython.min.css 中定义（位于您的 python 库所在的任何地方——在我的 Max 上，即 /Library/Python/2.7/），其中 widget-hlabel 定义为

.widget-hlabel{min-width:10ex;padding-right:8px;padding-top:3px;text-align:right;vertical-align:text-top}

min-width:10ex 是相关部分。

虽然可以为整个文档覆盖它，但我看不到一种简单的方法来一次更改一个小部件。它必须在 JavaScript 端完成，因为 FloatTextWidget 类没有从 python 端单独访问 Widget 的标签组件。这将需要开发一个从FloatTextWidget 子类化的自定义小部件，对于这样一个简单的问题来说，这似乎需要付出太多的努力，而且启动起来很脆弱。至少，这是我看到的唯一方法——欢迎更正。

相反，我决定完全避免使用带有描述的小部件的自动标签，而是将每个标签构造为HTMLWidget，这样我就可以完全控制它的外观。看起来是这样的：

【讨论】：

我同意您的发现，即没有简单的方法可以更改单个小部件的样式。但是，看着你的新图像，我想知道你为什么不简单地在页面中注入一些 css 样式来更改 widget-hlabel 类的min-width？这导致与您的视图非常相似。
我不想更改页面中所有标签的最小宽度，只更改该工具特定面板中的标签。（这最终将成为TabWidget 的一个标签。）如果您能告诉我如何注入 CSS 使其仅在本地应用，那就太好了。

【解决方案3】：

为每个小部件使用布局参数。这是文档的链接：https://ipywidgets.readthedocs.io/en/latest/examples/Widget%20Styling.html 特别是它说，您可以像这样在 HBox 中分别定义描述和小部件：

    from ipywidgets import HBox, Label, Layout
    label_layout = Layout(width='100px',height='30px')
    HBox([Label('A description',layout=label_layout), IntSlider()])

【讨论】：