Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

th:field should render hidden field before checkbox to not break common checkbox replacements #178

Closed
franktopel opened this issue Mar 19, 2018 · 4 comments

Comments

@franktopel
Copy link

@franktopel franktopel commented Mar 19, 2018

Almost all custom checkbox replacement solutions, be it in Bootstrap, Foundation or Materialize CSS, depend upon the following HTML structure:

<input type="checkbox" id="my_id" />
<label for="my_id">Checkbox label</label>

This is due to the limitations of CSS where usually the visual checkbox replacement is implemented like this:

input[type=checkbox] { visibility: hidden; width: 0; overflow: hidden; }
input[type=checkbox] + label::before { font-family: IconFont; content: "\e801"; }
input[type=checkbox]:checked + label::before { content: "\e802"; }
/* or some other unicode character or even an image */

(+ meaning adjacent sibling or subsequent direct neighbour)

Which means the replacement can only work if the checkbox comes right before the label element, with no further element between the two.

Of course CSS also has the ~ sibling selector, but using that would affect all subsequent labels within the same parent element, which is obvioulsy unwanted as it dictates the outer HTML structure.

There is no problem that you're adding a hidden field when using th:field and I clearly understand why you're doing it - the problem is the position you're inserting it. To not get in the way of custom checkbox replacements, would anything object against placing your <input type="hidden" name="my_id" value="on" /> before the actual <input type="checkbox" />?

Note: I am aware of #68 but the person closing that issue seemingly did not grasp the problem.

@franktopel franktopel changed the title th:field should render hidden field before checkbox to not break common checkbox replacments th:field should render hidden field before checkbox to not break common checkbox replacements Mar 19, 2018
@dquessenberry

This comment has been minimized.

Copy link

@dquessenberry dquessenberry commented Apr 3, 2018

I am also facing this exact problem and there doesn't appear to be a clean workaround without hacking my standardized CSS to support this specific use case. If anyone knows how to configure Thymeleaf to insert the hidden input BEFORE the checkbox input, please us know!

BTW, this appears to be the offending code: https://github.com/thymeleaf/thymeleaf-spring/blob/3.0-master/thymeleaf-spring5/src/main/java/org/thymeleaf/spring5/processor/SpringInputCheckboxFieldTagProcessor.java

@danielfernandez danielfernandez self-assigned this Apr 8, 2018
@danielfernandez danielfernandez added this to the Thymeleaf 3.0 milestone Apr 8, 2018
danielfernandez added a commit that referenced this issue Apr 25, 2018
danielfernandez added a commit that referenced this issue Apr 25, 2018
…before checkboxes from the SpringTemplateEngine
danielfernandez added a commit that referenced this issue Apr 25, 2018
@danielfernandez

This comment has been minimized.

Copy link
Member

@danielfernandez danielfernandez commented Apr 25, 2018

A new boolean renderHiddenMarkersBeforeCheckboxes configuration property has been added to SpringStandardDialect, and can be also configured directly from SpringTemplateEngine. So now you can do:

SpringStandardDialect dialect = ...;
dialect.setRenderHiddenMarkersBeforeCheckboxes(true);

or:

SpringTemplateEngine templateEngine = ...;
templateEngine.setRenderHiddenMarkersBeforeCheckboxes(true);
@danielfernandez

This comment has been minimized.

Copy link
Member

@danielfernandez danielfernandez commented Apr 25, 2018

Already in 3.0.10-SNAPSHOT

danielfernandez added a commit to thymeleaf/thymeleaf-tests that referenced this issue Apr 25, 2018
…sion tests for the Spring dialect with the renderHiddenMarkerBeforeCheckbox flag
danielfernandez added a commit to thymeleaf/thymeleaf-tests that referenced this issue Apr 25, 2018
danielfernandez added a commit to thymeleaf/thymeleaf-tests that referenced this issue Oct 2, 2018
…sion tests for the Spring dialect with the renderHiddenMarkerBeforeCheckbox flag
danielfernandez added a commit to thymeleaf/thymeleaf-tests that referenced this issue Oct 2, 2018
danielfernandez added a commit to thymeleaf/thymeleaf-tests that referenced this issue Oct 2, 2018
…sion tests for the Spring dialect with the renderHiddenMarkerBeforeCheckbox flag
danielfernandez added a commit to thymeleaf/thymeleaf-tests that referenced this issue Oct 2, 2018
danielfernandez added a commit to thymeleaf/thymeleaf-tests that referenced this issue Oct 2, 2018
…sion tests for the Spring dialect with the renderHiddenMarkerBeforeCheckbox flag
danielfernandez added a commit to thymeleaf/thymeleaf-tests that referenced this issue Oct 2, 2018
@denneralmeida

This comment has been minimized.

Copy link

@denneralmeida denneralmeida commented Feb 22, 2019

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

set this in application.proprerties

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.