Vanilla way of allow horizontal scrolling when content overflows

Hi all,

Sorry if this question has already been asked, but is there a way to do (in native/vanilla Bubble, without adding JS) to allow horizontal scrolling when content overflows for a group?

It exists for vertical scrolling in the new responsive engine, but is there the same thing for horizontal?

Thanks!

3 Likes

I think I solved the problem with the same code.
I used 2 groups - one fixed with the size to fit everything and the second can variate with the page:

1 - the first group should be fixed (it can be a row) and he goes inside the second.
2 - the second group is the one that you need to expose the html and place something (in mt case i used “scroll”). this group should variate the size with the page.
3 - place a html in the page and type the code :

\<style>
#scroll{
overflow-x: scroll !important;
}
<\style>\

(OBS: remove the bars “\” in the code at the beginning and at the end)

4 - create a condition on the html element “when the current page width > {size of the fixed group} then clean the html” if you don’t do this the scrollbar will be always visible even if the page is much bigger than the fixed group.

5 - And the container alignment of the second group should be left-aligned. create a condition: “when the current page width > {size of the fixed group} then container alignment is centered”

4 Likes

We can remove steps 4 and 5 by replacing “scroll” by “auto”.

#scroll{ overflow-x: auto !important; } <\style>
1 Like

Hey I’m struggling to understand this. Is the first group an html element? or where do I put the html?

  1. Just drop a visible HTML element on your page wherever you want. Past the code provided previously in this HTML element.
  2. Then create an outer group (can be responsive), and give him an ID attribute name scroll (because this is how we set it #scroll). Let’s call this group O
  3. Create a group inside your group O with a fix width and put inside whatever you like. Let’s call this group I
    You’re all set, your group I will scroll horizontally inside your group O if I width>O width
1 Like

Can this be done within a RG?

EDIT: Yes it can.

1 Like