beter way for styling checkboxes and radio buttons
at the moment checkboxes and radio buttons are very limited in how you can style and align them.
A design like this is impossible to pull off if you want to make it responsive.
the ability to be able to put individual radio buttons in a (layoutgrid)cell would help create designs that feel intuative and create an overal beter experience for the users.
We are experiencing the same issue and we solved it by using a separate label for each radio button so that the input was no longer nested in the label and then styling both input and label so they sit beside each other. We also then had to use set attribute for each checkbox (twice) to set the ‘id’ on the checkbox and then the ‘for’ attribute on the label so you can click on the label and check the box as expected. It was a work around and seems really silly to have all the extra set attributes but it worked.
It would be really awesome if Mendix just updated their code so the input is no longer nested!
I think we ended up using a widget to fix the issue of being able to style a checkbox/radio buttons.
the issue is that
.input[type=checkbox]:checked {}
needs to happen before (or as the parent of the) the label so that the label can be styled.
Great suggestions Jason, I recently looked into this as well. Since Mendix frontend is partly built on bootstrap I assumed I could use Awesome Bootstrap Checkbox styling https://flatlogic.github.io/awesome-bootstrap-checkbox/demo/
What I discovered was the markup Mx generates for default checkbox and radio buttons isn’t compatible with this method. (the html input and label tags follow a different nesting and structure, which prevents bootstrap styling in this way)
I wasn’t able to find a workaround, perhaps an idea that needs further investigation? Hopefully it wouldn’t impact too much for Mx R+D to adjust the html output of the built-in “Check box” and “Radio Buttons” widgets.
Change HTML from this (MX as of Modeller 7.22):
<div class=”form-group”>
<label>Some label</label>
<div class=”col-something”>
<input type=”checkbox/radio” />
</div>
</div>
To this:
<div class="checkbox checkbox-primary">
<input type="checkbox/radio"/>
<label>Some label</label>
</div>
https://forum.mendix.com/link/questions/86617