Need some feedback on scrollbars on Edge/Chrome on Windows.

[mathias]

Hi, hoping someone who knows about browser scrollbars have time to give me some pointers.

We have a grid with quite compact layout that has a lot of records so it needs to scroll.
In load_skin it is configured with

showCustomScrollbars: true,
nativeAutoHideScrollbars: true,

This works great on Mac, in all browsers we tried - Safari, Edge, Chrome, Firefox. example:



However, on Windows we get another behaviour - while it works in Firefox, in Chrome/Edge, the scrollbar does not float on top-pushing the icons to the right on top of the text, as visible in image below:


The content gets cropped, and the scrollbars don't look great either...

I've tried all sorts of scrollbar settings I could find in the docs, but I haven't been able to make any changes.


I am hoping someone can help me out with pointers - is it possible to get these scrollbars to float on top on Windows like they do on Mac? (as I sidenote, I find it very strange that the rendering engines works differently like this)

Cheers and thanks in advance

[Isomorphic]

Please remember to post the release and the patch build of SmartGWT that you're using when you report issues such as this.

[mathias]

Iso, my apologies, I usually remember, I think. We're running 13.0-p20230104.

[Isomorphic]

Just to be clear, you're showing us screen shots of desktop browsers in desktop mode on MacOS (top) and Windows 10 (bottom)? Can you get that same appearance in the Showcase by modifying one the samples?

[mathias]

If I understand you correctly, sure. I just go into your live grid showcase example. https://smartclient.com/smartgwt/sho...ured_grid_live

Here's what it looks like on Chrome on Mac (please note that I'm taking the screenshot just as I'm scrolling to illustrate the marker. otherwise it would be blank) The scroll marker is floating above the content:


and on Chrome on Windows (latest chrome, latest windows 11):

[Isomorphic]

Hi Mathias

SmartClient does not currently support scrollbars that automatically hide and show as the user interacts with them in environments where this is not natively supported.

In MacOS, the auto-hide scrollbar behavior is available natively in browsers, and setting "useCustomScrollbars" to false in a skin will cause these native auto-hiding scrollbars to be used basically everywhere.

In ListGrids the framework has to do some extra work to handle the fact that if you're incrementally rendering a tall list grid with variable-height rows, the scroll size of the content may actually change as the user scrolls, but scrolling needs to appear smooth.
In order to achieve this, useCustomScrollbars is forced to be true, and the special "NativeScrollbar" class is used instead of our normal SmartClient custom Scrollbar class.
Without going into the implementation details, this allows us to render out a native scrollbar and control its thumb size and position separately from the actual scroll position and content size of the target being scrolled [the ListGrid body].

We detect the fact that the native scrollbar automatically hides and shows in MacOS as you scroll, and cause our NativeScrollbar instances to do the same.
(This is all enabled by that nativeAutoHideScrollbars flag)


In Windows, even if you enable the "autoHide scrollbars" OS level setting, native scrollbars within the browser do not auto-hide, and SmartClient doesn't currently support auto-hiding and floating scrollbars in environments where this is not natively supported.

We apologize for any confusion in this thread. Your original screenshots and description sounded like you were seeing a different behavior from what we were expecting.

Regards
Isomorphic Software

[mathias]

Gotcha, thanks for the great explanation

So our basic problem then, is that the layout that works fine on several browsers - when the scrollbars not only hides, but also floats above the content - doesn't work on Windows, where both your and the native scrollbars will take up extra real estate... (Except for, as I mentioned, Firefox on windows where you also get floating scrollbars that auto hide).

That's too bad. We've made kind of a pixel-fixed grid layout, so I guess now we have to make one that adjusts for potentially narrowing on the right side depending on the OS and Browser (on Android/IOS you also have floating scrollbars)

Man, those native windows scrollbars don't look great, IMO.... Again, thanks for the input.

[Isomorphic]

Just in case it's helpful for you: The ListGrid does support a flag to explicitly say "always leave a gap for scrollbars" - when true the listGrid fields' widths will always size as if a scrollbar is visible even if it currently is not visible.

[mathias]

Right. Well it doesn't really help us with our custom layout since it still shifts the content to the left. I tried just increasing the nav pane with with the same size as the scrollbar and that works, however I have a few questions:



1. In the text above, you write "In order to achieve this, useCustomScrollbars is forced to be true, and the special "NativeScrollbar" class is used instead of our normal SmartClient custom Scrollbar class". This implies that calling "setCustomScrollbars" has no effect.
From my tests this is not true. If I set this to true or false it makes Edge/Chrome on windows to either use a more narrow scrollbar from you, or the native one which is greyer and wider. (Yours is better, both because it's more narrow, and also we can customise it)


1. So, I would still assume that if we run with the smartgwt-scrollbars, the width would be the same in all windows browsers right. I would imagine that that's an advantage if the native scrollbars are differently in different browsers?

2. Are there any performance issues going with the SmartGWT-scrollbars vs. the browser native ones - I mean using the "NativeScrollbar"-class vs. your own stuff?

---

My goal here is a predictable width real estate for our listgrid/navpane in different browsers on Windows. On Mac it doesn't matter as we've discussed, since the scrollbar floats on top.

[Isomorphic]

Hi Again

On #1
Sorry for the confusion here. I think we may have mis-spoken

In general - if showCustomScrollbars is set to false, all widgets use browser-native scrollbars, with one exception: Because of the way we have to manage variable row heights and scrolling within ListGrids, listGrids will show special SmartGWT-created scrollbars that essentially wrap a browser native scrollbar in a way that allows us to manage its size and position independently of the actual scroll height and position of the ListGrid body content. In this case the scrollbar itself is an instance of the special NativeScrollbar class.

If showCustomScrollbars is set to true...
If nativeAutoHideScrollbars is true, SmartGWT will detect whether the environment its in natively shows auto-hide scrollbars.
If so it'll use the special NativeScrollbar class pervasively.
As far as the user is concerned this means we show "native scrollbars" in this environment, though technically we're creating and managing the scrollbars.

If the environment doesn't auto-hide its scrollbars, (or if nativeAutoHideScrollbars is false), we use SmartGWT-created scrollbars [that are a subclass of the Scrollbar class]
These are skinnable and allow you to have a more consistent appearance than relying on the browser-native scrollbars in many cases.

These properties are typically set to a desirable default for the current skin in the load_skin.js file, which is why switching to an older skin like "Enterprise" will cause scrollbars to show up even on a Mac device.

So the bottom line is - if you set useCustomScrollbars:true, you'll get "native auto hide" behavior if you want it, and for environments where this doesn't happen you'll get the scrollbar as defined in the skin.


#2: Yes - using custom scrollbars ensures consistent, configurable sizing and styling across environments [with the exception of the auto-hide case]

#3: No, you should see no performance difference between using SmartGWT scrollbars vs native scrollbars.

[mathias]

Thanks again for great feedback, that's what we ended up doing (using your skin with auto-hide where possible). It's too bad that width has to be taken up by the scrollbars but that's life I guess.