python - ipyvuetify：如何限制 TextField 的宽度

Question

我正在尝试使用ipyvuetify文本字段来设置一位数，但不能将文本字段的 with 限制为任何合理的值。一个简单的代码，例如

import ipyvuetify as v
#Textfield should be an one digit number...
v.Row(children=[v.TextField(type="number"), v.Html(tag='H1',children=['Some text here'])])

结果是一个看起来很难看的巨大 TextField：

如何为 TextField 的宽度设置一些限制/设置它以使其具有一个字符的最大宽度？或者，我可以在 vue v-TextField / vue 代码上设置任何属性来限制 TextField 的大小吗？

Answer 1

我认为您不能直接限制 的宽度Textfield，它将采用其父元素的最大宽度。

但是你可以把它放在一个宽度固定的父元素中：

v.Row(
    children = [
        v.Html(
            tag = 'div',
            style_ = 'width: 500px',
            children = [
                v.TextField(type = "number")
            ]
        ),
        v.Html(
            tag = 'H1',
            children = ['Some text here']
        )
    ]
)

Answer 2

将 a 添加max-width:50px到 TextField 样式有效。

import ipyvuetify as v
text_field_widget = v.TextField( style_ = "max-width:50px", v_model=None, type="number")
#Textfield should be an one digit number...
row = v.Row(class_ = 'mx-2',children=[text_field_widget, v.Html(tag='H1',children=['Some text here'])])
row

Answer 3

这是我迄今为止最好的，基于 Christoph 的回答：我添加了 v.Spacer，并将第二部分转换为 v.Col （可能还值得将第一部分包括在 v.Col 中？）

import ipyvuetify as v
v.Row(
    children = [
        v.Html(
            tag = 'div',
            style_ = 'width: 50px',
            children = [
                v.TextField(type = "number")
            ]
        ),
        v.Spacer(),
        v.Col(
            sm=3,
            tag = 'H1',
            children = ['Some text here']
        )
    ]
)