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

Question

我目前正在使用以下 jinja2 模板渲染几个 Flask 字段（SelectFields、InputFields）：

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

结果格式如下：

我想控制下拉列表的宽度（我认为更窄的宽度看起来更自然），但是（不出所料）当我尝试通过控制 div 宽度来实现时，整个字段, 包括标签被约束和标签文本环绕。

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

Answer 1

这对我有用
jinja2 模板：

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

这是表格 1 class:

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>

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

Answer 3

当 Jinja2 代码呈现为 HTML 时，它将在每个表单字段上填写一堆属性。对于您的示例，如果您在呈现后检查页面，它应该类似于：

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

因此，您可以通过将一些 CSS 添加到您的 Jinja2 模板头部来控制字段和标签作为一个组或单独的：

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

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

Is there a way to control the width of wtf.form_field input fields without affecting the label width?

jinja2

flask

wtforms

flask-wtforms