<input type="radio"> inside <label> tag does not render radio control

classic Classic list List threaded Threaded
2 messages Options
Reply | Threaded
Open this post in threaded view
|

<input type="radio"> inside <label> tag does not render radio control

rkarlin
I am using Thymeleaf 2.1.5 RELEASE.  The following code snippet renders the labels (which seem to be clickable) but not the radio buttons.  I want the labels to be to the right of typical radio button "dots".

            <div class="col-sm-4">
            <ul class="list-unstyled">
            <li th:each="preference : ${allEmailPlatforms}">
            <label class="radio-inline" th:text="#{${'requestaccount.emailtype.' + preference.toString() + '.label' }}">
            <input class="radio" type="radio" th:field="*{emailPreference}" th:value="${preference}"/>
            </label>
            </li>
            </ul>           
            </div>

The generated page source looks like this:

<div class="form-group required">
            <div class="control-label col-sm-offset-3 col-sm-3">Email Preference</div>
            <div class="col-sm-4">
           
            <ul class="list-unstyled">
            <li>
            <label class="radio-inline">Exchange</label>
            </li>
            <li>
            <label class="radio-inline">Google Apps</label>
            </li>
            <li>
            <label class="radio-inline">Forward to Non-CMU Email</label>
            </li>
            </ul>           
            </div>
</div>

Screenshot:


Hoping someone can help me.
Reply | Threaded
Open this post in threaded view
|

Re: <input type="radio"> inside <label> tag does not render radio control

Metroids
Th th:text attribute of your label overwrites all children tags.  You need to do something like this:

<label class="radio-inline">
    <span th:text="#{${'requestaccount.emailtype.' + preference.toString() + '.label' }}" />
    <input class="radio" type="radio" th:field="*{emailPreference}" th:value="${preference}"/>
</label>