Hi, I’ve got a busy user interface screen and I’m having to shrink the screen to get to lower parts of the screen. I’m using Mac M1 and tried in Chrome & Safari.
Regards
Paul
Hi @Paul_HIllen
There is the “overflow” option for block components like Page/Block/etc. To enable scrollable content you need to change it to “auto”.
However, it depends on other options like height/position/flex/etc. therefore could you please share a link to preview your app?
Regards,
Vlad
Hi Vladimir,
Sorry, maybe I didn’t explain correctly. It’s not the UI blocks when they are complied and run, it’s the actual interface on which they are set out.
To see all th screen I reduce content size -
The text on the properties, layers and component panel drops down to 4pt.
Application ID - A20959C8-58A0-45C4-BEEE-FF108415524A
Regards,
Paul
Well, the designer renders the same UI which will be in runtime.
So, in order to get a scroll you need to configure the container to enable a scroll
Sorry, I’ll show 2 more screenshots, this time the entire desktop.
First, screen shot showing ‘demopage’ but not all of the INTERFACE can bee seen -
There are no VERTICAL scroll bars.
Second screen shot, again showing ‘demopage’ but to see all the screen I have to reduce view size using cmd ‘-’
Now I can see the ‘buttons’ (in blue) at the bottom. Still no vertical scroll element.
R,
Paul
I completely understand what you mean.
Your issue is with specifying overflow CSS property for a container where you would like to have a scroll. The system can not recognize what exactly has to be scrollable because sometimes we need to have the entire page content scrollable and sometimes it should not be but on the page, there might be a container which should have scrollable content.
Here are two pages where:
-
there is no overflow CSS property for Page and Container either
https://skilledhome.backendless.app/api/files/ui-builder/containers/default/index.html?page=without-scroll -
there is overflow: auto for the container on the page
https://skilledhome.backendless.app/api/files/ui-builder/containers/default/index.html?page=with-scroll
as you can see the scroll doesn’t work on the first page and to see the entire content you have to zoom out for the browser page