0

I have the following WTF form

class config_reports(FlaskForm):  
    test2use = SelectMultipleField('Choose Test(s):', [DataRequired()], choices=[('', '')]) 
    display_cuts = BooleanField('Display Proficiency Cuts?', default = True)    
    submit = SubmitField('Run Report')

and now I'm trying to fancy up my checkbox to use the example found here, https://getbootstrap.com/docs/4.0/components/forms/, which uses this code

<div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>

Within my jinga2 template file, I'm trying the following. Some of the style is applied, but my checkbox isn't clickable. Any advice on how to properly apply the styling here? 

<div class = 'col'>
    <div class="formwrapper">
        <form method="POST" action="{{url_for('config_tools.config_reader')}}">
            <div class="form-field">
                {{form2.test2use.label}} 
                {{form2.test2use (class="form-control", required=False)}} <br> 

                <div class="custom-control custom-checkbox">
                    {{form2.display_cuts.label(class="custom-control-label")}}
                    {{form2.display_cuts (class="custom-control-input")  }}<br> 
                </div>

                {{form2.submit(class = "btn btn-primary")}} <br><br>
            </div>
        </form>
    </div>
</div>
user350540
  • 429
  • 5
  • 17
  • Already answered here https://stackoverflow.com/questions/22084886/add-a-css-class-to-a-field-in-wtform CSS classes need to be called with `class_=""` – Chase Jun 02 '20 at 00:07
  • Thank you. Perhaps something more is needed since changing `{{form2.display_cuts (class="custom-control-input")}}` to `{{form2.display_cuts (class_="custom-control-input")}}` didn't produce expected result? – user350540 Jun 02 '20 at 00:20
  • Can you be more specific in what you mean by "expected result". Add an image of your current output/view/rendered form to your OP. Also add an expected output pic if need be. Or go into more detail about what the expected output/render needed to be once you provide an image of the current view/render/output @user350540 – Akib Rhast Jun 02 '20 at 01:44
  • Also, add the html code of `
    ` of your rendered page. You can get it by using the chrome dev tools.
     – Akib Rhast Jun 02 '20 at 01:48
  • Owh, and one last thing, it would help to have a [MRE] . Take a look at this as well, [ask] – Akib Rhast Jun 02 '20 at 01:50

0 Answers0