CSS to align checkboxes in form

ERPNext Customize ERPNext
1

Hi,

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!

Untitled-2

Untitled-1
Untitled-11228×206 9.37 KB

image

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});
	}
});
2

Any CSS masters out there?

3

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

1 Like
4

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.

cheers!