Using Bootstrap switches for checkboxes

[PanderMusubi]

I would like to have a Bootstrap switch rendered for a checkbox. Ideally, I would like to enable this via a parameter when creating a BooleanField, but that is for later.

I have used the following lines to replace what is in form.html in order to get a switch rendered.

    {% if field.widget.input_type == 'checkbox' %}
        {% call _hz_form_wrap(horizontal_columns, form_type, True, required=required) %}
            <div class="custom-control custom-switch">
                <label class="custom-control-label">
                    {{ field(class_="custom-control-input")|safe }} {{ field.label.text|safe }}
                </label>
            </div>
        {% endcall %}

This renders a switch, see screenshot.

However, the switch is not responding to mouse clicks. How can this be fixed?

Second question is how to trigger this via a parameter in BooleanField?

[PanderMusubi]

Found a better way tom implement this in form.html, however, it is still not responding to the mouse clicks. Please contact me to find a good way to implement this so I can make a PR.

[PanderMusubi]

My current improved implementation is to add a switch class to main the Python file:

class SwitchField(BooleanField):
    def __init__(self, label=None, **kwargs):
        super(SwitchField, self).__init__(label, **kwargs)

and use the switch with:

class ExampleForm(FlaskForm):
    example = SwitchField('Example') 

and also extend the checkbox rendering in templates/bootstrap/form.html to:

    {%- if field.widget.input_type == 'checkbox' -%}
        {% call _hz_form_wrap(horizontal_columns, form_type, True, required=required) %}
            {% if field.type == 'SwitchField' %}
                <div class="custom-control custom-switch">
                    <label class="custom-control-label">
                        {{ field(class_="custom-control-input")|safe }} {{ field.label.text|safe }}
            {% else %}
                <div class="form-group form-check{% if form_type == "inline" %} form-check-inline{% endif %}">
                    <label class="form-check-label">
                        {{ field(class_="form-check-input")|safe }} {{ field.label.text|safe }}
            {% endif %}
                </label>
            </div>
        {% endcall %}

The only thing missing is that the rendered switch is not responding to mouse clicks, for the rest it works.

Who can help me fix this? The result with documentation, I can put in a PR then.

[PanderMusubi]

@greyli, specifically I need to get the rendering from:

                <div class="custom-control custom-switch">
                    <label class="custom-control-label">

to (I think):

                <div class="form-group form-check">
                    <label class="form-check-label">

[PanderMusubi]

Or perhaps not, the documentation at https://getbootstrap.com/docs/4.4/components/forms/#switches uses:

<div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="customSwitch1" />
  <label class="custom-control-label" for="customSwitch1">Toggle this switch element</label>
</div>

[PanderMusubi]

Please see (and upvote) also wtforms/wtforms#545

[PanderMusubi]

If you support this, perhaps you can also say something about wtforms/wtforms#545

[PanderMusubi]

@greyli If you think it would be possible to trigger rendering of a switch instead of a checkbox via a parameter in kwargs as oppose to that separate subclass, please let me know which approach to take.

[greyli]

I think this implementation is OK, but how you solve the mouse click issue?

[PanderMusubi]

In templates/bootstrap/form.html several ways are used to select the proper rendering. Using a subclass is one way, but wtforms will not support it. Hence, I would like to minimize what is needed to get a switch rendered, so I think using a parameter with the constructor is better. It prevents developers adding this subclass.

The mouse issue is still there, unfortunately.

[PanderMusubi]

Still looking for an impementation which doesn't need class SwitchField, e.g. by passing a key-value pair via kwargs when creating an instance of class BooleanField in Python which is picked up by the rendering.

[PanderMusubi]

Does this PR #159 solve this issue?

[PanderMusubi]

@greyli the rendering of a checkbox has become more complex. I would like to render a switch using the form-switch class and is not as trivial as my earlier attempts.

What would currently be the best path to solve this? Via a parameter in render_field e.g. switch_style=False and will render only for a checkbox class the switch when this parameter is set to True.

For the user, that would be the most easy was, not having to create a switch subclass.

[PanderMusubi]

Ah, found a working version. Will make a PR.

[PanderMusubi]

#174

[greyli]

Implemented in #174.