I am having an issue with the resizing of some of my elements.
If you go to the link https://strategytennis.bubbleapps.io/version-test/player_search?debug_mode=true and search “Brian” select the first name that pops up. Scroll down to where you see the 3 different colored repeating groups. They each have their own type of comments. When I resize the page, the Blue RG doesn’t resize properly, specifically for when the phone is in landscape mode (portrait mode is fine). I have the exact same settings (sizing-wise, the dynamic content just pulls different comments but the repeating groups are all structured the same way) for all three, yet the Blue RG is not filling the entire page like the Green and Red repeating groups. I noticed that I have all 3 set to have a minimum width of the current width (current width = 350px), but the Green and Red RGs take up a width of 167% when I go in Landscape view on my Phone (and in the UI Responsive Editor), while the Blue RG maxes out at the 90% minimum and doesn’t go to a 167% width in order to fill the entire screen. Why is that?
Do you want that on mobile all of them have a width of 350 px and on pc the blue repeating group fill the same space that the green + red have, right?
So you can try doing this:
Uncheck This Repeating group has a fixed width in the 3 repeating groups.
Uncheck Apply a max width in the 3 repeating groups.
Apply a cell min width of 100 px to all of them
Set the Blue repeating group width to: red group width + space px betwen red and green
group + green group width.
For example if red group and green group have each one a width of 350 px, and the space between them is 100 px = 350+100+350=800 px, so in the blue group set the width to 800 px. but with cell min width of 350 px.
Group each Repeating group inside a Group (with the same height and size)
Uncheck fixed width in thre 3 new groups.
Uncheck apply a max width to the 3 new groups.
Set a min width 99% to the red and green group (not to the repeating groups).
Set a min width of 43% to the blue group (not the blue repeating group).
Adjust manually in the responsive tab the width for mobile to match the others groups width.
That worked for the repeating groups! However, the Blue Repeating Group is having issues with the content inside of it. It does not resize like the content inside the Green and Red repeating groups. At first, I had the Blue RG’s content set the exact same as the Green and Red repeating groups. That didn’t work, and so I tried making the minimum width’s of the elements 43%, 99%, and 100%, but none seemed to work, unless I was doing something wrong.
I have attached screenshots of the editor for it. Thank you in advance if you are able to help out even more!!
P.S. The video you sent was super helpful!! Video solutions are my favorite thing
Do you want the input and the button to be as big as the blue repeating group?
(to do this, make them maybe 620 px and center them horizontally, and try giving them a minimum width of 20 and uncheck the apply max width)
Or to have the same width as the others inputs on the other repeating groups?
(you can try this: set the width to all as the others elements in the other repeating groups. Then, group all of them in a new group and center it, and set to this new group a min width of 99% and uncheck the apply max width. To the hands green and red button, make the container group as fixed width or with a min width of 99% and uncheck a max width).
Actually I’m a little tired lol (here is 1:39 am ), but may works, or tomorrow I can check it again.
Hope you continue advancing in your app. If you need anything else, you can send me a message and I can do tutoring 1 to 1 or develop some sections for your app.
), but may works, or tomorrow I can check it again.