CSS to align checkboxes in form


I’m trying to align my check boxes like in the second image (which is photoshopped). The code below was supplied by @NCP, which I appreciate. However I was wondering if there’s a way to do this dynamically? Unfortunately the code below doesn’t scale well when the window is resized.

I think a solution that had a constant ‘padding’ between the elements would be great… however I know nothing about CSS. Might not even be possible in this environment? In the 3rd image you can see what happens when it switches to mobile aspects. Without the custom script this would usually stack the check boxes.

Many thanks!



frappe.ui.form.on('Your DocType', {
	refresh: function(frm) {
	    $("div[data-fieldname = responsible_person]").css({'margin-left': -260});
	    $("div[data-fieldname = authorised_person]").css({'margin-left': -455});

Any CSS masters out there?

Have you tried the 'margin-left': auto as a value, or try a different unit such as 10% or 2em?

1 Like

Thanks for the suggestion @pmjd, I have tried those and unfortunately get similar results. Auto is the default column break layout, and % or em sort of work, until it collapses to mobile devices sizes, at which point you get the padding for ‘stacked’ check boxes.

I’ll keep at it. It’s a good little problem to improve my understanding of CSS.