Question

我目前使用以下 jinja2 模板渲染多个Flask字段（SelectFields，InputFields）：

<div>{{ wtf.form_field(form.blockingProbability) }}</div>

这导致以下格式：

Current rendering

我想控制下拉列表的宽度（较窄的宽度看起来会更自然，但是（不出所料）当我尝试通过控制div宽度，整个字段，包括标签受到限制，标签文字也会被包围。

有没有办法控制下拉字段（和其他输入字段）的宽度，同时保持标签的宽度不变（展开）？

Answer 1

这对我有用 jinja2模板：

<div style="width: 50%">
    {{ form1.language.label }}
</div>
<div style="width: 25%">
    {{ form1.language }}
</div>

enter image description here

这是form1类：

class myForm(Form):
   language = SelectField(u'Programming Language', choices=[('cpp', 'C++'), ('py', 'Python'), ('text', 'Plain Text')])

Answer 2

这也应该有效，并且还与其他字段的宽度保持视觉一致性：

<div>{{ wtf.form_field(form.blockingProbability, horizontal_columns=('lg', 2, 4)) }}</div>

最后一个值 - 4 - 在horizontal_columns中设置输入字段的宽度。

Answer 3

将Jinja2代码呈现为HTML时，它将在每个表单字段中填充一堆属性。以您的示例为例，如果您在呈现页面后对其进行检查，则其外观应类似于：

<div>
    <label for='blockingProbability'>
        Blocking Probability
    </label>
    <input id='blockingProbability' name='blockingProbability' ... >
</div>

因此，您可以通过在Jinja2模板头中添加一些CSS来成组或单独控制字段和标签：

<head>
    <style type="text/css">
        input {
            width: 20px;
        }
    </style>
</head>

有没有办法控制wtf.form_field输入字段的宽度而不影响标签宽度？

3 个答案: