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

Question

这是一个微不足道的问题，但仍然很烦人。我正在编写一个工具，允许用户在IPython笔记本中设置一堆数字参数进行分析。我将它设置为一组FloatTextWidget，放在ContainerWidget中。它们有相当长的标签，如“姿势点数”或“背景圆盘半径”。它们不能很好地对齐。这是因为长度：如此页面所解释的那样，“小部件的标签具有固定的最小宽度。标签文本始终右对齐，小部件左对齐...如果标签超过了最小宽度，则小部件向右移动。”

我的标签超过了“固定最小宽度”。我想知道如何更改它。我已经在 Widget 源代码中查看过，但找不到任何信息。 编辑：响应@Jakob，这里是一些代码，这里是一个屏幕截图 在这个例子中，“阈值：”足够小，可以适应标签宽度，但所有其他标签都太长了。

- Leon Avery

---

你能提供一些代码让我试试吗？ - Jakob

@Jakob：我添加了一些代码链接和截图。 - Leon Avery

Answer 1

从笔记本内部更改样式：

from IPython.display import HTML, display

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

- Ben Jackson

---

这里有另一个过程。 - Rafa Viotti

Answer 2

对于每个小部件，使用布局参数。这里是文档链接：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()])

- Andrey Shur

Answer 3

好的，我找到了关于我的问题的具体答案：最小字段宽度在 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方面提供对小部件的标签组件的单独访问。这需要开发一个自定义小部件，该小部件是从FloatTextWidget子类化而来，这似乎对于如此简单的问题来说是太费力了，而且很脆弱。至少，这是我看到的唯一方法-欢迎纠正。

相反，我决定完全放弃使用小部件自动标记其描述，并将每个标签构造为HTMLWidget，这使我完全控制其外观。这是它的样子：

- Leon Avery

---

我同意你的发现，没有简单的方法可以改变单个小部件的样式。然而，看了你的新图片后，我想知道为什么你不直接将一些CSS样式注入页面来改变widget-hlabel类的“min-width”？这会得到一个非常类似于你的视图。 - Jakob

我不想改变页面中所有标签的最小宽度，只想改变工具栏中这个特定面板中的标签的最小宽度。（最终这将是一个TabWidget的选项卡。）如果您能告诉我如何注入CSS以使其仅在本地应用，那就太好了。 - Leon Avery