Icons in layers opposite? doesn't match tutorials?

Questions
1

Is it me or is the Icon in the layers backwards?

I have a group set to column but the Icon looks like a row? And if you set Row the icon looks like it should be column icon?

Likewise in the Tutorial - Lesson 1.6 he sets the group to column but the icon shows the hatched box for fixed width or align to parent? In the video. In fact his whole tree has the hatched boxes and not the row or column icons ??

Below is my editor. This is confusing?

columvsrow
columvsrow503Ă—232 7.79 KB

1 Like
2

This is really confusing, but it’s not “inverted” — it’s the way Bubble draws the idea of “slices” of the container, not the direction of the axis.

Column(column) = the children are one below the other. Each child typically occupies the width of the container, so visually it becomes “horizontal strips” (like shelves). That’s why the icon looks like “lines”.
Row (line)= children are side by side. Each child turns a “slice” vertically (columns inside the container), so the icon is left with “vertical bands”.

That is: the icon is representing the shape of the areas occupied by the items (horizontal vs vertical), and not “the stacking arrow”. If you think about shelves (Column) vs vertical gummy bears (Row), it makes sense.

3

I confess that I also got confused about this, lol. I think the shape of the icon ends up being confusing.

But the idea is that, if it’s a column, each thing will be below the other. Imagine that those two rectangles in the icon are two buttons in a column container. The second button will be below the first button, which is why the icon looks like this. In a row, the same thing would happen: the second button would be next to the first, and that’s why the icon is shaped that way. But I confess that for some reason, this icon is really confusing, lol.

4

Thanks for the replies. I have used Bootstrap/HTML /JavaScript like over a decade ago and after playing with some raw bootstrap code it makes more sense now. I think it was because i was using text boxes as the children and not containers. So the text boxes obviously don’t have a Row or Column setting. Whereas the containers do have this setting. Actually more difficult than I oringally thought getting used to using a no code builder, but I just need more practice !

1 Like