Alignment of form checkbox

SOLVE
Highlighted
Occasional Contributor

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? 

 

nicolasdenutte_0-1601239523625.png

 

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

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Solution
Top Contributor

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


bootstrapcreative-horizontal-trim.png

Located in Michigan, USA

View my HubSpot Templates 


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

View solution in original post

4 Replies 4
Highlighted
Solution
Top Contributor

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


bootstrapcreative-horizontal-trim.png

Located in Michigan, USA

View my HubSpot Templates 


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

View solution in original post

Highlighted
Occasional Contributor

Hello Jacob, 

 

Thank you for jumping in. 

 

Link to the page: 

https://go.appscale.com/lowering-my-aws-bill-2

 

Best,

Nicolas

Reply
0 Upvotes
Highlighted
Top Contributor

It looks like you figured it out. Did you try the code I supplied or did you do something different?

 


Jacob Lett
Marketing Consultant
Strategic marketing consultant and skilled web designer specializing in the manufacturing industry to increase revenue through driving website leads and brand awareness.

Reply
0 Upvotes
Highlighted
Occasional Contributor

Hello Jacob, 

 

I just figured it out 5 minutes ago using your code snippet. Thanks a lot for this, super helpful 🙂 

 

Best,

Nicolas