Search code examples
pythonflaskwtforms

Can you adjust the width of a question in flask-wtforms?

I have a form in flask-wtforms and it is extremely wide: enter image description here

I want to reduce the width of the Does the patient smoke and Age questions. This is the flask-wtforms code I am using:

class UploadForm(FlaskForm):
    upload = FileField('Select an image:', validators=[
        FileRequired(),
        FileAllowed(['jpg', 'png', 'jpeg', 'JPEG', 'PNG', 'JPG'], 'Images only!')
    ])

    smoke = SelectField(
        'Does the patient smoke?',
        choices=[('Yes', 'Yes'), ('No', 'No')]
    )

    name = StringField('Age')

    submit = SubmitField('Get Results')

And in the HTML:

{{ wtf.quick_form(form) }}

But on mobile devices it isn't that big, so I need to decrease the width and still keep it centered but only for laptops and computers.

Solution

  • Using Bootstrap would solve your issue. Bootstrap documentation: https://getbootstrap.com/docs/4.5/getting-started/introduction/ You need to place this stylesheet link in the head element of your .html file.

    If you wrap a div with class 'col-md-6' around your form, then it will use half of the width of the screen for the elements. Bootstrap uses a grid 12 segments wide, 6 is telling it to use half of the grid. If you want the form to be even smaller, try 'col-md-4'. If you want it a bit larger, change it to 'col-md-8'.

    Let me know how that works for you! Cheers -Andrew

    <head>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
</head>

<div class="col-md-6">
     {{ wtf.quick_form(form) }}
</div>