In the generated front-end form for ACF check boxes, the normal format (for row output) is label, then checkbox:
Toppings:
Tomato []
Extra Cheese []
Salt []
I want the check box to be on the left, like so:
Toppings:
[] Tomato
[] Extra Cheese
[] Salt
But you can’t do this with “float: left” or other CSS approaches, because the HTML element for the label is output first, so styling the div container for the label makes it drop down to the next line. In short, there does not seem to be a CSS solution for doing this.
A further problem is the labels format to a fixed width, which is too short for long labels. I can apply the “whitespace:nowrap” style attribute to the label element, but while that fixes the wrap, it extends the label through the border into (and over) the checkbox div.
The other output options (block and table) are not useful for my layout either, since they cause an extra line in the output, and for my rather long list of check options, makes the form unwieldy.
Is there an option I am missing that will allow me to display the check on the left?
If not, is the function pluggable, and how would I go about applying this solution?
In the alternative, if I have to hack the plugin, and simply reorder the label div and check output, what file and function(s) would I be looking at?
