topic Re: Alignment of form checkbox in Lead Capture Tools

Alignment of form checkbox

nicolasdenutte — Sun, 27 Sep 2020 21:08:47 GMT

Hello,

I'm trying to create a form on a landing page that is divided into two columns. On the left column, I have added a form with a multiple checkbox field. I noticed that the checkboxes are aligning with the text when the label text spans two lines. I've tried to find how I could change the stylesheet to make the label text align but I'm not sure how to do it. Any recommendations?

I'm not a developer but to me,it seems that this has something to do with the fact that the multiple checkbox element is a list input? Is there a way I can make CSS changes in the style sheet that would make the text on the second line (see screenshot above) align with the text on the first line next to the checkbox?

/* Inputs - Checkbox/Radio */ form .inputs-list { margin: 0; padding: 0; list-style: none; } form .inputs-list:not(.no-list) label { color: #FFFFFF; } .inputs-list > li { display: block; margin: 0.7rem 0 0.7rem 0.7rem; padding: 0; width: 100%; } input[type=checkbox], input[type=radio] { border: none; cursor: pointer; height: auto; line-height: normal; margin-right: 0.35rem; padding: 0; width: auto; }

Thank you for your recommendations/help.

Best,

Nicolas

Re: Alignment of form checkbox

Jake_Lett — Mon, 28 Sep 2020 08:40:36 GMT

Hi Nicolas,

Your code is pretty close. Could you provide a link to a live page? I think I can match your html code based on your CSS but the link would help. What you need to do is add a negative margin on the input and then rebalance the text with left padding.

.inputs-list > li { display: block; margin: 0.7rem 0 0.7rem 2rem; padding: 0; } input[type=checkbox], input[type=radio] { border: none; cursor: pointer; height: auto; line-height: normal; margin: 0 0.35rem 0 -1.4rem; padding: 0; width: auto; }

Codepen demo: https://codepen.io/JacobLett/pen/RwaOKga

Jacob Lett

Website Designer & Developer

Located in Michigan, USA

View my HubSpot Templates ›