ipyvuetify：如何限制 TextField 的宽度答案

【问题标题】：ipyvuetify: How to limit width of TextFieldipyvuetify：如何限制 TextField 的宽度
【发布时间】：2021-02-22 09:08:54
【问题描述】：

我正在尝试使用 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 的大小吗？

【问题讨论】：

标签： python vuetify.js ipyvuetify

【解决方案1】：

向 TextField 样式添加 max-width:50px 有效。

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

【讨论】：

【解决方案2】：

我认为你不能直接限制Textfield的宽度，它会取其父元素的最大宽度。

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

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

【讨论】：

【解决方案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']
        )
    ]
)

【讨论】：