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

时间:2015-07-05 09:57:01

标签: flask jinja2 wtforms flask-wtforms

我目前使用以下 jinja2 模板渲染多个Flask字段(SelectFields,InputFields):

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

这导致以下格式:

Current rendering

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

有没有办法控制下拉字段(和其他输入字段)的宽度,同时保持标签的宽度不变(展开)?

3 个答案:

答案 0 :(得分:4)

这对我有用 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')])

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:0)

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