Removing scroll bars when in Kiosk mode, but not specific to iFrames

SharpTools.io (web)
1

Anyone know how to do this? The way I am running this on a Pi 3 with 7" touchscreen and access an openbox config via SSH to set my URL just sets this parameter:

export KIOSK_URL=SharpTools App

Can I set a “no scroll” to this somehow? What are my choices here? FYI, I used this link to set this up

2

You could use the Custom CSS feature of Themes and Styles to accomplish this. For example, the following will hide the scrollbars only when the browser is in fullscreen mode.

:fullscreen body {
    overflow-y: hidden;
}

If the browser isn’t running as fullscreen, you may have to adjust accordingly.

:warning: Any CSS snippets provided are not ‘officially’ supported and may need to be adjusted with future platform updates.

3

I know this is many years old, but this thread came pretty high up in my google search and I had to go through some trial and error to get something working. Hopefully this helps someone in the future.

First, if you’re going to use the :fullscreen tag, it is important to note that the tag only works if you click the SharpTools fullscreen button in the (…) menu on the dashboard. This CSS won’t work if you just use F11 in your browser or a browser parameter that sets fullscreen on launch. That’s problematic for those of us trying to set up a kiosk. The URL ?kiosk=true doesn’t use the browser fullscreen api, it just reformats the page.

As a workaround you can use the following CSS in the theme on your kiosk dashboard:

body {
    overflow-y: auto !important;
}

Use “auto” if you want a scrollbar to appear only when necessary, or “hidden” if you just want it always hidden.

You need the !important because there’s somewhere in the default CSS that’s forcing body overflow-y to be set to “scroll”. That default CSS is set to !important so we need to override it with our own. I assume that it’s set that way to maintain consistent formatting. Hope this helps the next kiosker.

1 Like