[HELP] Remove Scrollbar from page

[GMSCreator]

How do i remove the scrollbar from a page? Or that the page is perfect sized for every screen resolution. No CTRL/CMD + +/-

Screenshot:

[nocodeventure]

You can find the answer on Stackoverflow. Copy paste your title in Google.

[GMSCreator]

Yes, but thats HTML, how can i add

<style type="text/css">
    body {
        overflow: hidden;
    }
</style>

in bubble?

[lantzgould]

Bubble Reference

You don't need to be a coder

[nocodeventure]

Enable setting ID’s on elements and give your main page an ID, for example Main.

Then use this:

#main {
    overflow: hidden;
}

[nocodeventure]

Don’t forget opening style tag and closing style tag.

[GMSCreator]

Where to enable ID’s?

[nocodeventure]

From the settings tab in your app. I’m sorry I’m on mobile so I can’t really make screenshots. You can find the answer also on the forum. Use the search filter.

It has been answered multiple times.

Welcome btw on Bubble, and good luck with your projects.

[GMSCreator]

I enabled the ID’s (screenshot)

tested multiple things, dind’t work

[andrewgassen]

Did you set the page ID as “main” in the page settings?

[nocodeventure]

ID attribute would be main. The HTML header is where you paste the style tag. Don’t forget to put the closing style tags.

Giving exact answers doesn’t make you learn anything. I’m sure if you just rethink it, you will solve it.

[GMSCreator]

[boston85719]

ID Attribute is where you write main

Then in the html element or header html of the page enter the html

You can take a look at an editor of mine that has pages with multiple ways of affecting the scroll bar…some show how can add scroll bar to a group element that has a text element that “overflows” and the default bubble behavior expands the group to fit the text, but this allows you to put a scroll bar onto the group so the height remains same but can scroll the text.

Can also see how to custom style the scroll bar as well with sizing and coloring options.

Have a peak at the editor.

Bubble Editor - Scrollbars

[boston85719]

By the way, something I just learned is that the page html will not work unless you are on a paid plan.

Check out this thread for a more helpful approach to the scroll bar issue

How to always show scrollbar on a repeating group?

@philnauta we pop some custom code into the HTML header (either on a page or in the app SEO settings). The following code will create a slim scrollbar on any device/OS: <style type="text/css"> ::-webkit-scrollbar { width: 2px; height: 0px; } ::-webkit-scrollbar-button { width: 0px; height: 0px; } ::-webkit-scrollbar-thumb { background: #cccccc; border: 0px none #cccccc; border-radius: 0px; } ::-webkit-scrollbar-thumb:hover { background: transparent; } ::-webkit-scrollbar-thumb:active { …

And this about paid plan for use of html header

Page HTML Header not working?

Aha! Thanks, Ken! So here’s what I’ve learned… I noticed the following under the SEO / metatags section of the app settings on the free tier: [image] (BTW, that should probably say “Personal plan or greater” or simply “paid plan”.) However, it apparently applies not only to app-level custom headers but also to page-level custom headers, because that same JS snippet works fine in both locations on a paid plan. What’s perplexing is that there’s no indication at the page level that it won’t wor…

I saw these after posting my editor link which is on a free plan.

So, there are options, but the easiest, html page header, is only available on paid plans.

And some instructions on how to customize it for your app

How To Create a Custom Scrollbar