Why do I have 2 Horizontal Scroll Bars?

Need help
1

Hello, I am making a some what complex RG setup and I wanted the Horizontal to fit to the group is in, I did this by adding the ID hscroll to my group and adding an HTML element:

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

This worked but now I am seeing 2 horizontal scroll bars:

image
image818×361 11.3 KB

image
image863×346 11.9 KB

The lower one that remains grayed out shows the following:
image

The upper one that allows me to scroll:

image
image624×105 9.17 KB

Layout in bubble:

image
image242×128 1.84 KB

It seems to be a wrapper inside of the outer div but I don’t have it setup this way in bubble, please let me know.

2

One is for the horizontal scroll bar you added even when it is not needed using the CSS of overflow-x: scroll (can change to scroll to auto or another value so it only shows when necessary)…the second scrollbar is likely on some other nested group that contains the RG and has the automatic application of a scrollbar based on the max width of that group and the width of the RG.

3

When I remove the overflow-x: it removes both of the scroll bars and allows the group to go beyond the defined length until it hits the edge of the page and pushes the page horizontally.

4

I reread your comment and I fixed it, thank you!

5

What was the fix?

6 
<style>
    .resizeHeader {
        overflow: auto;
        resize: horizontal;
    }

    #hscroll{
    	overflow-x: auto !important;
    }
</style>```
1 Like