Really simple bit of code this can make your forms look a little bit more appealing, and on mobile a bit easier to use. This simply changes the look from this …
to this…
You only need to copy and paste this CSS. This is for all global checkboxes. If you wish to target field Numbers and views you will need to add these in.
Thanks @Johnny_Appknowledged_UK - that’s a nice snippet. Could you explain how the code could be adapted so it doesn’t have to be global and it can target a specific field on a form or view.
Thank you for your continued generosity
Sure @CarlHolmes I presume you know how to get the field numbers and views so here it goes.
If you wanted to target via view_??? you need to insert a view number before each time appears’.kn-form’ like this.
//this would target every same type of field in that specified view
.view_???? .kn-form input[type="checkbox"] {
if you wanted to add by field numbers you would do this to each line before
//this would target a specified field what ever view this is in
.kn-form .field_???? input[type="checkbox"] {
You can of course combine and do this
// this would target a view and a field
.view_???? .kn-form .field_???? input[type="checkbox"] {
However this can be a bit annoying if you want to do this in multiple places meaning you have to copy the same code CSS over & over. In this case you would add a class listing all the fields in a single line of javascript and then use that new class as a reference.
See here I have added the field number separated by a comma and added a class called toggleSwitch we can use this everywhere declared via the field numbers. You can call the class what you like as long as this is declared in the CSS.
Hi, this is a great code I have working well on our setup. However when implemented, the checkboxes appear on a separate line above the related text, any idea why this is not wrapping the checkbox and text on 1 single line?