I have been playing around with this for ages tonight and cannot seem to get it at all…
I want the checkboxes to align vertically so all the text will start from the same point and also I want to add an input box on the top for adding a item so how would I move all of my other ‘cards’ down so that the last one is sitting on the bottom of the border…?
Hi Ethan,
It is hard to say without seeing the existing code, and what CSS styles you have applied. Normally it is just a case of using text-align:left spanning the text element and checkbox. Since the check is always the same width the text will line up.
To make the last border disappear (I think that is what you want?) you could either use the last child selector (https://css-tricks.com/almanac/selectors/l/last-child/) to style the last element’s bottom border, or as you are using React, conditionally style the last element’s bottom border from code.
I would prefer CSS for this job, it’s a matter of taste though.
For aligning the items, you could get rid of those <div> and <p> tags and wrap your inputs with a label instead:
return (
<label key={todo.id} className="todoText"><input type="checkbox" />{todoText}</label>
)
Then in CSS, get rid of the positioning attributes and instead give them a fixed width (either in px or %).
aha halfway there! just a slight issue with the border on the bottom…! When I move the width, the border moves with it…
Screenshot 2020-11-03 at 22.23.48|690x285
The CSS for .todo-item needs to stay as it was, they have the border so they should stay at width:100%, just give .todoText a fixed width of (for example) 400px and remove the positioning properties:
.todoText {
line-height: 100px;
width: 400px;
}
I hope that’ll do what it should, but debugging with screenshots is difficult, can you make a codepen or similar?
Its not showing as well on codepen or on jsFiddle so not too sure…
I have got it to this stage. I just need to shift everything there to the middle with the checkboxes aligning vertically…
Have you tried giving your .todoText a fixed width? You could then add margin:0 auto to them, or setting your .todo-item to justify-content: center.
What do you mean “it’s not showing on codepen”, do you have an account there?
