Vanilla way of allow horizontal scrolling when content overflows

Questions
1

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
3

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
5

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

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

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

7
  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
8

Can this be done within a RG?

EDIT: Yes it can.

1 Like
9

I am having partial success with this.

In relationship to this other post: Horizontal Scroll for Group with RG inside as Table - #4 by data1 , I tried your method but and here is what I have so far:

When the content of my horizontal scroll group has a FIXED width that will beyond the screen width, then I get the horizontal scrollbar :white_check_mark:

image
image1169Ă—488 11.9 KB

However, in my case I don’t want a fixed width, the content could vary in width (because my content would be a table with a varying number of columns).

So when I set “fit width to content” on the text and on the group containing the text, I would expect the text to stretch all the way out outside the horizontal scroll group and the scroll bar appearing. Yet, what I get is the text wrapping again…:no_entry:

How can I make my content of variable width AND get the horizontal scrollbar when this width is wider than the screen size?

10

Sorry to revive this post! This worked perfectly. Now, I am trying to find a way to hide the scrollbar when scrolling horizontally. Is that possible?

This is wha tI currently got in the HTML element:

#scroll{ overflow-x: scroll !important; } #scrollContainer:-webkit-scrollbar { display: none; } <\style> Appreciate your help! Not 100% sure if the #scrollContainer is correct for the display or not. Thanks! Naz
11

Hi all,

I have been using this method to allow my repeating groups to scroll horizontally, but it seems to disable the scroll function in normal workflows. Is there any way around this? I’m not very familiar with HTML, but this is the content of my HTML element:

#scroll-horizontal {
overflow: auto !important;
}

Thanks!