Checkbox is not rendered with Bootstrap CSS and SpringBoot + Thymeleaf

1250

September 29, 2019

A problem

Thymeleaf generates hidden input tag right after your checkbox input tag.

It looks like:

<div class="form-check">
    <input type="checkbox" class="form-check-input" id="qr5" name="user.isEnabled" value="true">
    <input type="hidden" name="_user.isEnabled" value="on">
    <label for="qr5" class="form-check-label dark-grey-text">User is enabled</label>
</div>

Therefore Bootstrap CSS cannot render a checkbox at all.

Solution

It was a disscuss in thymeleaf-repo about this behaviour.

And since Thymeleaf 3.0.10-SNAPSHOT you can add a property in application.properties:

spring.thymeleaf.render-hidden-markers-before-checkboxes=true

It leads the thymeleaf to insert its hidden input tag just before one of yours:

<div class="form-check">
    <input type="hidden" name="_user.isEnabled" value="on">
    <input type="checkbox" class="form-check-input" id="qr5" name="user.isEnabled" value="true">
    <label for="qr5" class="form-check-label dark-grey-text">User is enabled</label>
</div>
on September 29, 2019