✅ 🔗 🚀 Feature Request: Container (v3.6 dev-edition) - Add Sticky Containers, Change flex-wrap behavior, fix gap overflow (Related to #18309)

[79ho3ein]

hello elementor developers!

In connection with this feature :

1- Question :
The "Sticky" feature is only enabled on widgets. So we do not have "Sticky" in containers. This is a very big limitation. Will this be added?
https://prnt.sc/20ylj3r

2- Proposal :
In container layout, the top rows are in the past. (Before container) But the bottom row was recently added. (container) https://prnt.sc/20ylpip
According to the photo above, We use the top rows when we want to design like the past. (red area) Because we do not want the containers to be stacked (no wrap). If we want the containers to be stacked, we use the bottom row. (green area)

But there is a point here. In the latest version of dev, whether we use the top or bottom row, "wrap" is enabled by default. I think it is much better, that if we use the top row, the wrap is not enabled by default. Because when we use the top row, it means we do not want the containers to be stacked. This seems more logical. But if we use the bottom row, the wrap is enabled by default.
Preview : https://prnt.sc/20ymv19

3- Maybe a bug :

In a container, place two 50% wide buttons. Put Direction on the row or default. Now enable "wrap".
You will see that the two buttons break and are placed below each other. This does not seem right. Because the total width of the two buttons is 100%. Why should they be moved below each other?
It should be done in such a way that activating the wrap does not affect the width of the elements.

thank you

[black-eye]

Concerning the point no. 3:
The reason for this issue is probably the default non-zero column-gap (I think they call it spacing and its default value is 10 or 20px - I can't check it right now, I'm on the bus). 50% + 20px + 50% > 100%, so when the wrapping is enabled, the second button won't fit. When the wrapping is disabled, everything seems to be ok, because everything is forced to stay in one single row.

This is how the flexbox computes the widths and the gaps. Not very fortunate, but that's how it is. It is also one big concern I have with the new flexbox container and should be resolved somehow, otherwice it brings more confusion than anything else.

Not sure HOW to resolve this issue though.

• Best solution would be to use CSS grid and fractions, which are designed exactly for this purpose. Unfortunately CSS grid is not on the table right now. IMHO flexbox is only a temporary semisolution for this ongoing layout problem.
• The best workaround might be good old "parent negative margin + child positive padding" approach, but yes, it's not the very elegant way.

Just a few hours ago I had a feedback talk with Tair on the new container and this was my main topic and concern. Hopefully it will be resolved somehow.

[79ho3ein]

hi @black-eye , Thank you for your comment.
Under normal circumstances, the width of the content is applied correctly. But when the wrap is activated, this problem occurs.
On the other hand, if we set the spacing to 0, the contents will stick together completely. I do not know. Maybe I'm wrong. But there seems to be a problem in the middle.
Perhaps it makes more sense that activating the wrap option would not affect the width of the content.

[79ho3ein]

hi
Items 1 and 2 have been resolved. Case 3 will apparently be the same. So it's better for me to close this issue.

thank you

[nicholaszein]

Hello,

thanks for submitting your feedback @79ho3ein and @black-eye! This was really important for the development of the flex container. We are almost there and some issues are still being considered, like the gap overflow. Since the gap issue is a separate issue, I'm just commenting here to remember that the other requests made here have been already addressed.

Discussion on the gap will be addressed in another issue.

Best regards.

[nicholaszein]

Hey, just an update:

🔃 I'm Merging this issue (the last part of it at least) with issue #18309.

Which is on the same subject.

Feel free to continue the conversation there. 😉

Nick