Sizing SectionsPro and SectionsBox to match browser

[cat]

1:

Is it normal for SectionsPro and SectionsBox to be ever so slightly taller than the browser, when Flexible Height is set to Proportional → Browser Height –> Proportion: 100%?

I’m always getting a scrollbar with 100% setting. The treshold is at 99.92% / 99.93% = no scrollbar at 99.92%, scrollbar at 99.93%. This is the closest I can get to 100% without a scrollbar, by enabling any of these frameworks/libraries built-in to Blank theme by ThemeFlood: Bootstrap v5, Materialize v5, Normalize.css, Reseter.css, Sanitize.css, Timber CSS.

(It’s more off when enabling Eric Meyer’s CSS Reset or Legacy RapidWeaver CSS, having to set the section height to 97.56% to match the browser height.)

2:

Also, when adding a border to SectionsPro, it doesn’t seem to be accounted for when sizing the section proportional to the browser. For example, when adding a 1px border to the SectionsPro stack, I need to lower the proportional-to-browser-height to 99.63% to match the browser, from 99.92% when not using a border. EDIT: Same when adding a 1px border to the Stack Page itself, instead of the SectionsPro stack.

SectionsBox seems to behave as I would expect, when adding a border to it: the section stack border doesn’t seem to change the section size proportional to the browser. EDIT: However, adding the border to the Stack Page itself instead influences the SectionsBox stack’s size proportional to the browser height, similarly to SectionsPro.

–

Should 100% match the browser or is it good enough to just use 99.92% (or whatever number works best with the framework)?

As an amateur, these might easily be normal that I just didn’t expect. Don’t pull any punches! Thanks.

–

Updated RW8, Stacks4, macOS 11.4.

[tav]

It is not normal - the Section should be exactly 100% of the browser height on desktop (mobile devices may vary when the navigation buttons etc take up some of the assigned browser height.)

Here is a 100% high section on a blank page in ThemeFlood’s blank theme which I believe you are using. You can see in the inspector that the height of the page and the section are identical to the pixel.

If you have scrollbars appearing (and your system settings are for auto scrollbars and not permanent) then you must have some additional margins or padding on the body or elsewhere. Using most Themes in RW - even blank ones, should not require the CSS reset to be applied as they tend not to be completely blank and will remove things like the default browser margin etc.

[cat]

Thanks Tav.

I also did it on a new empty page with the Blank theme, don’t have other elements unfortunately. Tried with different system settings for the scrollbars, and also opened the page in Safari with no success.

I’m emailing you a project file with these pages, where BAD = scrollbar showing, GOOD = scrollbar not showing:

with SectionsBox:

“BAD: SBox100%”
“GOOD: SBox99.92%”
“GOOD: SBox99.92%+SBborder”
“GOOD: SBox99.63%+PageBorder”
“GOOD: SBox99.63%+SBborder+PageBorder”

with SectionsPro:

“BAD: SPro100%”
“GOOD: SPro99.92%”
“GOOD: SPro99.63%+SBborder”
“GOOD: SPro99.63%+PageBorder”
“GOOD: SPro99.33%+SBborder+PageBorder”

(note it needs to be 99.33% on the last page with both borders on, unlike SectionsBox which is fine at 99.63% with the two borders).

As an example, this is how the first example page, “BAD: SBox100%” looks like:

[tav]

I don’t see scrollbars on any of the “bad” pages.

To qualify this - if you preview in RW or a browser and alter the size of the app window then scrollbars will appear briefly and then disappear after second or so as would be expected.

If they don’t go away or they are always present then it would advisable to check your scrollbar settings in the system preferences - they are controlled by the users system and not the webpage unless hijacked by code (which Sections does not do).

Another more general tip would be to use the Flexible Height Responsive setting rather than the Proportional settings if you do not need the content control overflow functionality. This is CSS only.

[cat]

Altering window sizes, changing the Scrollbar settings in System preferences, or switching to Flexible Height Responsive at 100% didn’t have a positive effect. Tested another system too (M1 pro, mac OS Ventura) with the same results. What’s more, even though there’s no scroll with Proportional to Browser Height at 99.92%, it appears when resizing the window to a smaller size. The treshold changes depending on browser:

–––
SectionsBox or SectionsPro
Proportional to Browser Height at 99.92%
Large window
= No scroll possible

–––
Same settings, but window height is reduced to the point where scrollbar appears. (Yes, it’s possible in system preferences to enable scrollbar hiding when not actually scrolling, but obviously I can still scroll, even if just 1-2 pixels.)

The best option for me at this point is Sections Pro + Flexible Height Responsive at 99% because the scrollbar doesn’t appear even if the browser window is resized to an absurdly small size on Firefox. The treshold is probably between 99 and 100%, but since it doesn’t accept decimals I went with 99%. Even though it’s not 100%, thanks for the tip!

[cat]

Also: Adding either a Stack Page border or a SectionsPro border, then resizing the window pushes the bottom border down and triggers the scrollbar to appear (or should I say scrolling is enabled, in case the bars are automatically hidden by the system settings).

Not that I need a border, just figured it could be a pointer to what might be happening under the hood. See below:

–––
SectionsBox or SectionsPro with border
Flexible Height Responsive at 99%
Large window
= No scroll possible, borders visible:

–––
SectionsBox or SectionsPro with border
Flexible Height Responsive at 99%
Windows resized to the point where scroll is possible
= Scroll is possible, bottom borders are slightly pushed down:

–––
SectionsBox or SectionsPro with border
Flexible Height Responsive at 99%
Windows resized very small
= Scroll is possible, bottom borders are pushed out of view, can be somewhat scrolled to:

[tav]

Regarding the borders - this is expected behaviour as borders are rendered on the outside of an elements boundary. If you did want borders, you would need a 100vh container with something inside it with the borders applied - or change the box-sizing CSS parameters for the theme or the preferred way would be to just use a inside box shadow to simulate a border.

Back to the main issue.

1. I am still unable to reproduce the appearance of scrollbars with your project file on any of my machines. Again, as scrollbar behaviour is operating system controlled and not webpage controlled then I still suspect this may be the cause in some way.

2. If the premise is that 100vh (100% browser height) is not producing a correctly rendered vertical size in your browsers (to the nearest pixel) then the only real way to check is to look in the inspector as I did in my screenshots above and see the reported heights of the body and the element in question.

3. Have you tried a different blank theme? The only reason I say this is the the one you are using does have an empty banner image and divs at the top of the page - perhaps these are contributing. It is not really blank.

4. Are you planning on having a 100% browser height page only or is this for a banner above the rest of the page content? Assuming there is more page content below then the page will scroll as normal.

All the above not withstanding, I have repeatedly checked your project file and tests of my own and cannot reproduce the scrollbars so I’m a bit stuck for options to try.

[cat]

Thanks tav for the feedback. I think you pointed me to the right direction (see 3)!

(Borders – Thanks, I’ll keep these options in mind. Don’t need a border for this full window stack at the moment, just used it to better illustrate the phenomenon.)

Main issue:

1 – See below.

2 – Inspector – Previewing in browser and checking in inspector I can see the 1 px high banner image the theme inserts to the top of the page. The heights are: page body 172 px, banner image 1 px, stacks 171 px.

3 – Different blank theme – Yes! I switched to the Foundation 6 theme (though I don’t have Foundation (or Foundry)) and there’s no scrollbar or scrolling possible at 100% section height setting, either with proportional height or flexible height. Things of course look a little a different and need to be re-adjusted but that’s a good trade-off if from now on I can trust things work as they should!

1 – It makes me wonder though, if the theme and its banner image is really the culprit, then why the same project file and same blank theme works OK for you. Which is why the theme wasn’t suspect to me so far. Given that, and since changing our systems didn’t have an effect on our own experiences, I still wonder if it’s down to some other variable between our testing circumstances (location?). In any case, I’ll report to the theme developer.

4 – Planning on a one-page website, looped background video, lightboxed content opened with buttons, in some cases as full screen modals, in others as smaller sections with scrollable content. Just wanted to be able to have a full page 100% x 100% canvas to place any elements in.