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

【问题标题】：Is there a way to control the width of wtf.form_field input fields without affecting the label width?有没有办法在不影响标签宽度的情况下控制 wtf.form_field 输入字段的宽度？
【发布时间】：2015-09-22 14:42:41
【问题描述】：

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

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

这会产生以下格式：

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

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

【问题讨论】：

你能把你的表单类的代码贴出来吗？
你在用flask-bootstrap吗？

标签： flask jinja2 wtforms flask-wtforms

【解决方案1】：

当 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>

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

谢谢。至少对我来说，这只适用于 form_type="horizontal"（而不是 "basic"），但这可能会在以后的某个阶段派上用场。 <div>{{ wtf.form_field(form.blockingProbability, form_type="horizontal", horizontal_columns=('lg', 6, 3)) }}</div>

【解决方案3】：

这对我有用
jinja2 模板：

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

这是 form1 类：

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

【讨论】：

我希望找到一种方法直接使用 wtf.form_field() 渲染来保持与不需要宽度覆盖的其他字段的视觉一致性，但我可以忍受这个（只需要对所有字段使用相同的方法，即使是 100% 宽度的字段）。