Vali D Vali D - 1 month ago 6
AngularJS Question

Custom checkbox changing position on click

I think I am missing something but I can't find a solution to the following problem.

I am using custom checkboxes on a list of sentences. At first it looks good but once you check the first checkbox, it moves.
I can't find out why the checkboxes move once you check them?

Here is a fiddle: https://jsfiddle.net/Hodor_/vhhj7huv/

I have noticed that by changing

content: "/2714";
to
content: "";

the checkbox doesn't move on click.

Can't understand how the content affects the position of the checkbox.

In other questions I saw recommendations to use vertical-align:middle, it doesn't work for me.

Any ideas?

Answer

The issue is with your usage of display: flex in conjuncture with position: absolute. It doesn't always work well.

To fix this you need to make 3 simple changes:

1) Remove position: absolute from your label:before

2) Remove padding: 0 0 0 50px; from your label

3) Add a margin-right: 20px(or any you want) to the label:before.

Simple.. So your final code looks like - Fiddle here

label{
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  cursor:pointer;
  color black;
}

label:before{
  /* position:absolute; */
  content:"";
  display:flex;
  justify-content: center;
  align-items: center;
  height: 30px;
  width: 30px;
  left: 25px;
  text-align:center;
  font-size: 20px;
  color: white;
  border: 1px solid #9b9b9b;
  border-radius: 4px;
  transition: all 0.5s ease;
  margin-right: 20px;
}

Remember: flexbox allows you to have a "flexible" or flow like control over your elements, it gives a more flexible nature to your elements positioning elements on its own based on your requirements.

position: absolute on the other hand does the exact opposite. It takes the element out of the document and lets you place it where you want via directions(left, right, top, bottom), its more like a "rigid" or stubborn way of controlling your elements.