Unresponsive checkboxes when wrapped in element

[cimm]

Bug Report

Check boxes become unresponsive when wrapped in another HTML element. Some frameworks, like Rails, wrap the element in another HTML element when the form contains errors so they can be styled, this breaks the visibility of the checkbox.

Steps to reproduce

Wrap an element around the input element, shown here (modified the Fomantic example). Now click the checkbox with the mouse, nothing happens.

Well, something does happen, the real checkbox does update but the pseudo element placed over it does not reflect the change.

Expected result

The pseudo element shows the correct state of the underlying checkbox.

Testcase

https://jsfiddle.net/3bgmc6ea/

Version

2.8.6

[ko2in]

IMHO, it's not possible to support random HTML layouts. There can be many possible ways to render the input and label for individual implementations.

If you put the label element first or if you wrap those in separate HTML container or if you put the input inside the label, that would produce the same output too.

Since, you use the framework, you have to follow the framework UI flow.

Or you can add your customization in checkbox.less (https://github.com/fomantic/Fomantic-UI/blob/master/src/definitions/modules/checkbox.less) to override framework behavior's that suits for your implementation.

[cimm]

@ko2in Yes, I suppose that's fair. Fomantic can't handle everything any random framework comes up with. Will have to write my own. Thank you for the pointers!