Container does not fit content consisting of repeat with items. The first image shows a web preview. The blue container fits the content perfectly. The second image shows the mobile app view where the blue container does not fit the content.
The items are generated from a list of 5 items. Is this a bug or am I missing something?
You need to check your “width and height” properties for the repeated item. Maybe it has a minimum width set that stops it from shrinking. In Your case maybe using “Advanced” would be a good option.
It does work on the web thought.
I have the following:
In searching, I found this (No-code Power-up: Grid/Table layout in AppGyver - YouTube) which was published in 2020 but does not seem to work on composer version I am currently using (4/22/2022)
Hmm… We’ll need to look into that tutorial and see what’s going on – it sounds like a bug. You can also create a bug ticket at our tracker.appgyver.com if you can go into further detail about the steps of what is failing.
Thank you, Mevi! I have reported the issue (container inconsistency in mobile app | Voters | AppGyver) and provided a provided a simple test app id to reproduce it.
That said, are there any other ways you can think of to generate the following simple layout?
Thank you for you help.
Great that you posted a ticket about this!
Something like this is what you want?
The basic building blocks are:
- Position > align self: center for the orange container
- Width for the orange container
- Specified width for white containers so that exactly three will fit in a row
- Gaps for white containers to every direction
- Padding for orange container that compensates the lack of left gap for white containers by adding more padding on the left
The problems come when the screen width is smaller than what the orange container is sized. Using flex grow / shrink with max width instead of static width works great except when there are uneven amounts of items on the row, as then the item will stretch to fill the whole row. Not sure how to solve that, or at least nothing comes to mind quickly
Thank you very much, Mevi. I added empty invisible containers so that the number of containers is always a multiple of 3. When the container is empty, I just hide it. That required custom JS but at least it works as intended!
Thanks again for providing a fix.