checkbox with label places the input as a child of label

adding in a checkbox with label has the order locked down between the label and the input. The following snippet is added with this form element:

<div class="checkbox"> <label> <input type="checkbox" >Label</label> </div>

The problem is when you add in server side controls which modify the label contents. For example using Thymeleaf:

<div class="checkbox"> <label for="defaultProfileCheck" th:text="#{image.library.ftpserver.defaultProfile}"><input type="checkbox" th:field="*{defaultProfile}" id="defaultProfileCheck" />Default Server</label> </div>

Where the th: (Thymeleaf notation) is added using the add attribute controls within BS Studio. The template engine processes the label and removes the contents and replaces it with the internationalized message that is indexed by th:text. This essentially removes the checkbox from the document completely leaving only the internationalized label. Although the functionality works when the html file is taken as exported. Once server side manipulation is added the input field is lost. I'm not sure why the input field is a child of the label instead of a sibling with a control for adding the label before or after the checkbox.

The app is using the semantic bootstrap coding found at

What you can try doing is use the custom code component where you can use basically freehand HTML. For an existing component, in the OVERVIEW pane, right click the element and select Convert to HTML.

You will not be able to use drag/drop in custom code components.


The post is very old, but the doubt continues. The only solution to using tags in the thyme pattern is to create custom components?