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

zanzu picture zanzu · Jul 5, 2015 · Viewed 8k times · Source

I am currently rendering several Flask fields (SelectFields, InputFields) using the following jinja2 template:

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

This results in the following format:

Current rendering

I'd like to control the width of the dropdown list (narrower width would look more natural, methinks), but (unsurprisingly) when I try doing this by controlling the div width, the entire field, including the label is constrained and the label text wraps around.

Is there any way to control the width of the dropdown field (and other input fields), while keeping the width of the label intact (unwrapped)?

Answer

Chandan Nayak picture Chandan Nayak · Jul 5, 2015

This worked for me
jinja2 template:

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

enter image description here

This is the form1 class:

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