Is there a way to control the width of wtf.form_field input fields without affecting the width of the label?
I am currently creating multiple Flask fields (SelectFields, InputFields) using the following jinja2 template :
<div>{{ wtf.form_field(form.blockingProbability) }}</div>
The result is the following format:
I would like to control the width of the dropdown (a narrower width would look more natural, metrics), but (unsurprisingly) when I try to do this by controlling the width div
, the entire box including the label is constrained and the label text wraps around.
Is there a way to control the width of the dropdown box (and other input fields) while keeping the label width unchanged?
source to share
This worked for me
jinja2 template:
<div style="width: 50%">
{{ form1.language.label }}
</div>
<div style="width: 25%">
{{ form1.language }}
</div>
This is the form1 class:
class myForm(Form):
language = SelectField(u'Programming Language', choices=[('cpp', 'C++'), ('py', 'Python'), ('text', 'Plain Text')])
source to share
When the Jinja2 code is rendered to HTML, it will populate a set of attributes on each form field. For example, if you are viewing the page after rendering, it should look something like this:
<div>
<label for='blockingProbability'>
Blocking Probability
</label>
<input id='blockingProbability' name='blockingProbability' ... >
</div>
This way you can manage the fields and labels as a group or individually by adding some CSS to the header of the Jinja2 template:
<head>
<style type="text/css">
input {
width: 20px;
}
</style>
</head>
source to share