Hide the Scroll Bars

OK so I have been trying all sorts of stuff to try and hide the scroll bar in kiosk mode cause it straight drives me nuts!!! in the end I have determined it 100% has to be changed in the website code. I started inspecting and looking for the overflow-x overflow-y so I can change x and y to hidden. buttttt I was hoping you could point me there faster or maybe have some other fix…

I did some digging, and the scroll bar is visible due to a css selector of:

.grid-main-container, .grid-container-overlay {
  padding-bottom: 50%;

I tweaked it a bit, and it will now correctly hide the scroll bar if dashboard content fits on the page. (You’ll see changes next release)

I can’t even begin to explain in words how amazing you guys are. Coming from cbpi to this is the single best investment I have made in brewing beer!!!


So I did the update and it didn’t get rid of the scroll bar. Maybe u could point me to the right file. I could mess with it. Might be something specific to my setup. All though I had the exact same issue with CBPI 3.1. I had to make some adjustments to that one as well. But that one was because the dashboard block was overshooting.

I do notice that the block on the left of the dash board is cut off. I’ll upload a photo when I get home.

1 Like

That looks like it triggered the scroll bar by just a handful of pixels. You can try zooming out one tick - the scrollbar should then disappear.

Trickier (but not impossible) would be to re-arrange your dashboard to take up one less row.

I’ll look into the cutoff on the left and right tomorrow. It may have something to do with re-rendering after the sidebar is hidden.

ok so I created a new dashboard and there was no scroll bar. as soon as I added one widget. it made the scroll bar even if the widget was in the middle of the screen!

That is weird. I just checked on FF / Chrome / Edge here, and the scrollbar properly disappears when not in editor mode. I did spot a bug in positioning of pickup when moving widgets.

If you inspect elements and look for a div with classes grid-container grid-main-container, how big is it? (it’s a background div for the dashboard)

I can’t get to inspector on my kiosk. What file would I find that in?

Or would my Mac show the exact same?

In source code it’s part of https://github.com/BrewBlox/brewblox-ui/blob/develop/src/components/grid/GridContainer.vue.

Your Mac may show the same, but it probably depends on screen size.

I can’t seem to navigate to that in my Brewblox directory.

You won’t be able to access it like that when it’s packaged for production. During the build, all html/js/css is optimized into unreadable gibberish.

Does the issue also reproduce on your Mac?

Ahhhhhhh ok. I’m going to load this on to a normal version of buster. And use the inspector. Need to get to the bottom of this nhahaha

I solved this by installing this scrollbar extension on chronium! Looks much better https://chrome.google.com/webstore/detail/modern-scrollbar/bgfofngpplpmpijncjegfdgilpgamhdk