I’m making a todo-app by following the todo app tutorial. For fun, I’m adding a deleting icon at the end of each todo item. I put the label text component and icon component into separate cells of a row component. I also set the margin the same (8 px for each up and down sides).
Now I see the text and trash can icon are well aligned in my composer pro canvas as follows:
Somehow the trashcans are positioned outside of the container. As you might notice, I also applied your instruction to the top container with the red trashcan, and it worked. The only difference between the red and blue trashcans is that the blue trashcan is doubly contained in two containers (one for alignment with the check box and one for including all repeating components).
I actually didn’t use the Row component. Instead, I drag-and-drop a container, and put other components in it. And of course, set the container layout to a horizontal and center-aligned as you told me.
I did some experiments by myself. As you can see above, below the big blue button, I made two containers for comparison. (1) First one is with a paragraph and icon components inside, and (2) second one is with a checkbox input field and icon components inside of it.
As you can see, the misalignment happens only when I put a checkbox input field into a container. Can you guess why this happens with the checkbox input field component?
I guess it could be so that the Checkbox component has some hidden style setting that its width is 100%. We need look at this and find a fix if that’s the case.
But for now, I’d suggest you to use the Row component instead of Container. It seems to work well for me in this case. Just make the Cell #2 width auto so that the trash can icon doesn’t take too much room on the screen and Checkbox label has room to grow.