Hello all. I’m struggling with getting the checkboxes and radio buttons to behave nicely. Not looking for a solution - but maybe some direction of how I could re structure my code and do things right. Feel like I’m hacking away at it without much though at this point.
https://codepen.io/drustin/pen/LoRoXJ?editors=1100
Hoping to have the label for the checkboxes/radiobutton to the left as seen in the sample project:
https://codepen.io/freeCodeCamp/full/VPaoNP
Thanks.
Hi @Drustin2,
So the way you have it coded now is;
<label> Label name </label> then <input type= >
which gives you what you told it; a Label name and the a radio button/checkbox
Now if we kind of change things around just a bit and say;
<label> <input type= > Label name </label>
How would that come out?
That brings things closer - I realized last night that my current positioning solution isn’t going to work. I think I will go ahead and explore the option of using CSS Grid with 2 columns after reading about it more here.
I think I need to logically separate items on left and right. Doing:
label, p{
display: inline-block;
text-align: right;
width: 45%;
padding: 5px 10px 5px 0;
margin: 0;
}
Is only a partial solution because of my radio button and check boxes havelabels on different side than the rest of my other field inputs.
My hint will get the radio buttons/checkboxes on the left and the labels for them on the right without using grid.
