Vertical scrollbar not appearing on bottom aligned group

Hello,

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.

I’ve created a repro app, details below:
Preview - Bubble | No-code apps
Editor - group-scroll-bug-repro | Bubble Editor

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.

The justify-content property shouldn’t be used with text elements. It doesn’t change anything in the text. Use text-align instead.

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.

Unless I’ve misunderstood what you mean?

That’s what I mean. OK, then this can be a Bubble bug.

It’s not a Bubble bug.

Ah, I see what you mean. Thanks for finding that article.

How would I work around this issue in in my project? I’m not using any custom CSS, just bubble features.

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.

Why do you need flex-end at all?

Thank you both for your responses.

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.

Thank you once again for helping me resolve this.

1 Like

But in your demo the first group has flex-start as the property for justify-content . How that’s coming?

The green box is aligned to top to show an example of a working scrollbar. The bug repro is in the red box.

You mean it’s a bug because Bubble uses justify-content:flex-end for bottom align?

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.

1 Like

This topic was automatically closed after 14 days. New replies are no longer allowed.