Issue with thymeleaf hidden inputs preventing css styling (for a list of checkboxes)

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

Issue with thymeleaf hidden inputs preventing css styling (for a list of checkboxes)

balteo
Hello,

I have the following table that uses Thymeleaf for generating its rows:

<tbody>
<tr th:each="row : ${allDayToTimeSlots}">
	<td th:text="#{'domain.enum.timeSlot.'+ ${row[0].timeSlot.name()}}"></td>
	<td th:each="dayToTimeSlot : ${row}">
		<input type="checkbox" 
	    	th:field="*{model.dayToTimeSlots}" 
		    th:value="${dayToTimeSlot.id}" 
		    th:disabled="${not dayToTimeSlot.enabled}"/>
	</td>
</tr>
</tbody>

Each cell contains a checkbox and Thymeleaf inserts a hidden input next to it.

<input type="hidden" ...
 

I am trying to style my checkboxes with a css toggle switch (see here http://callmenick.com/2014/05/13/css-toggle-switch-examples/).

Unfortunately, the hidden control inserted by Thymeleaf prevents the css styling to work as expected. See below:

 <input th:field="*{model.dayToTimeSlots}" class="cmn-toggle cmn-toggle-round" type="checkbox">
//A hidden will be inserted here and will prevent the css styling and the label to work
<label th:for="${#ids.prev('model.childcareWorkerType')}"></label>

Can anyone please help?

Regards,

Julien.
Reply | Threaded
Open this post in threaded view
|

Re: Issue with thymeleaf hidden inputs preventing css styling (for a list of checkboxes)

Zemi
Administrator
Hello,

the CSS selector .cmn-toggle + label means "the label element just after the element with class 'cmn-toggle'".

Substitute that selector for a CSS class and set this class to the label element.

For example, use .cmn-label instead of .cmn-toggle + label and add the class to the label, as in
  <label class=".cmn-label" th:for="${#ids.prev('model.childcareWorkerType')}"></label>

Regards,
   Zemi

Reply | Threaded
Open this post in threaded view
|

Re: Issue with thymeleaf hidden inputs preventing css styling (for a list of checkboxes)

balteo
Thanks a lot for this reply Zemi.