I’ve noticed a possible bug where containers aligned to the bottom don’t show a scrollbar. I’m not sure if this is truly a bug, or if I’ve done something wrong. Any guidance would be appreciated.
The green box is aligned to top and, as you can see, the scrollbar works correctly.
The red box is a copy of the same, but with the alignment set to bottom, and no scrollbar is shown.
Thank you for having a look!
Edit: I’ve used text boxes as an example for the repro. My actual scenario has multiple repeating and non-repeating elements in it. This issue occurs regardless of what the contents of the groups are.
I don’t think that’s the issue. I’ve used text boxes as an example for the repro. My actual scenario has multiple repeating and non-repeating elements in it.
I’d need more detail on the desired layout and behavior, but given the sample page, if all you want is for the bottom (red) group to scroll, then change its Container alignment setting to match that of the top (green) group. Maybe I’m not understanding what you’re trying to accomplish though, so feel free to set me straight.
EDIT
Still not entirely clear on the objective, but if the aim is to have the content “pre-scrolled” to the end, then without CSS or JS, a RG might work - depending on the nature of the content. There is no “scroll to” for regular groups, but repeating groups do allow you to scroll to a specific element, so with a vertically scrolling RG, you should be able to scroll to the last element on page load. Anyway, additional detail on the desired behavior and type of content might be helpful.
So, I’ve now managed to make it work for what I need, I’ve explained how below.
More about what I’m trying to do: The easiest description would be a chat gpt style conversation, that starts at the bottom of the page and gets filled in upwards. The messages need to scroll on overflow, while keeping everything on the bottom on the page where it is - imagine input text box, but I can’t use a floating group for reasons.
How I’ve solved it: I’ve aligned the parent to top and added an emtpy group above my content element that is set to “height (max): inf” and don’t fit to content, which makes it expand and push the content to the bottom. This now expands upwards neatly, is reponsive and the scrolling works; even with scroll to RG element. Feel free to tell me if there’s a better way.
Lessons learnt during this exercise: My page is too complex and I need to redesign it to be simpler.
Why do you need flex-end at all?
That’s what bubble seems to use to bottom align the contents of a group. I haven’t added this in myself.
Having said that, @mdwp.post your point about flex-end is correct and that it’s not a bug in bubble, but just a result of how it works. However, the fact that bubble allows to you select “Allow vertical scrolling” when the group is bottom aligned (i.e., using flex-end) is misleading and I believe that should be made clearer. I will raise a bug for this as a UI issue.
I’ve raised the bug about being shown the “Allow vertical scroll” option on incompatible alignment options. I’ll leave it to the bubble team to decide if the flex-end bit needs to be fixed or not.
