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:
Hi, my best guess is that you could fix this by making the row component align its content center.
But for the reason why those still look aligned on Composer canvas I cannot be certain. Perhaps its due to formulas sometimes evaluating incorrectly on canvas (if you have some)
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 can’t be sure with limited info on your style properties, but one guess would be use of margins for the Row component. Those have sometimes issues to stay contained in the outer Container.
So if your Row has margins, change it to use padding instead or move the margins to the outer Container.
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.
As you can see above, the width of Checkbox or Container is not configured at all… I tried Row component but then I cannot the trashcan icon aligned to the right most.
Did you make the Row’s Cell #2 width auto when you tried? Cause that’ll make the trash can icon stay on the right. So does your Row style look like this?
You can achieve this by selecting Cell #2 and pressing the X icon indicated in the next picture:
