Scrollbar Chrome vs Firefox

[stonebranch2]

Hi Isomorphic,

We have had some comments that our scrollbars in Firefox are not as user friendly as they are in Chrome.

Chrome seems to be a bit larger, and they do not do the hide/show behavior, and don't seem to have that odd transparent effect, where when you click on the scrollbar in a grid, it selects the record at that location.

I know some of this is browser specific behavior, however, is there any options we can set to make them a little more consistent in appearance and behavior to Chrome?

Chrome


Firefox



Thanks

[Isomorphic]

Take a look at Canvas.showCustomScrollbars and Canvas.scrollbarConstructor. There are basically 3 modes available:

1. use the browser's built-in scrollbars

2. use Scrollbars that are actually composed of several Canvases (e.g. the thumb is a stretch image)

3. a hybrid of #1 and #2: use the native scrollbar, but wrapped in a Canvas

Given that you are seeing platform differences, you are probably using either #1 or #3. You could shift over to #2, maybe just for Firefox, and then you would have full control over scrollbar appearance and behavior (such as settings like floatingScrollbars, alwaysShowScrollbars, and nativeAutoHideScrollbars).

[stonebranch2]

Thanks.

I think we are using whatever is default for the Stratus skin, as it looks pretty consistent with the showcase.

We will take a look.

We don't normally apply changes specific to a browser type, any recommendation on an approach for that?

Regards

[Isomorphic]

You can rely on isc.Browser.isFirefox.

[stonebranch2]

Could you provide the Java equivalent for SmartGWT?

[stonebranch2]

Hi Isomorphic,

Is it sufficient to just set Canvas.setDefaultShowCustomScrollbars(false); in the entry point?

I can't seem to make a difference.

I thought maybe I could also change the load_skin.js, out of curiosity, to the following, but that had no impact either.

isc.Canvas.setProperties({
        // this skin uses custom scrollbars
        groupBorderCSS: "1px solid #b8b8b8",
        showCustomScrollbars: false,
        nativeAutoHideScrollbars: false
    });

With respect to clicking on the scrollbar and it selecting the record underneath, any thoughts on that?

If we have a grid, and a scrollbar appears at the bottom horizontally, if you click to scroll it, it selects the record underneath it, which is problematic for us. The same happens if you click the vertical scrollbar. (Only a problem in Firefox)

Thanks in advance.

[Isomorphic]

The setting you are trying to apply would turn custom scrollbars off, in other words, it is a no-op. You want them true.

While it would work to change this setting at the EntryPoint - it just has to be changed before any components are created - the easier and less confusing spot to do it would be to make a change in load_skin.js, so that the settings you intend are clear (e.g. not overridden in just one entry point for just one app). Then, you will be able to use the JavaScript isc.Browser.isFirefox flag as well.

[stonebranch2]

OK, bit confused, based on the Javadoc and the defaults in load_skin.js, showCustomScrollbars is true by default. Is this misleading?

[Isomorphic]

It's skin and version dependent, and you may be setting it to true elsewhere. Also, as covered above, if you in situation #3 (hybrid) you can have showCustomScrollbars:true but still be using native scrollbars because of the scrollbarConstructor setting.

The simplest thing is: just look at what the settings are at runtime. You can open the Developer Console and just check with some simple eval()s, like Canvas.getInstanceProperty("scrollbarConstructor"). It's probably "NativeScrollbar" and could be changed to either "Scrollbar" or "MinimalScrollbar" to stop having to deal with the Firefox built-in scrollbar that you don't like.

[stonebranch2]

Evaluator: result of 'isc.Canvas.getInstanceProperty("scrollbarConstructor");' (0ms):
"SpritedScrollbar"

[stonebranch2]

I have experimented a bit more here and I never see NativeScrollbar. I was able to set it to Scrollbar and MinimalScrollbar, and tried to set the scrollbarConstructor on the ListGrid directly as well, but I don't see any change in behavior, even when isc.Canvas.getInstanceProperty("scrollbarConstructor"); returns Scrollbar and MinimalScrollbar. The scrollbar never changes appearance or behavior.

[Isomorphic]

While you can inspect the values of properties at any time, to make a change, the setting needs to be applied before the component is created (if you're setting it system wide) or before the component is drawn (if you're setting it on a particular component).

You can also look in the Watch tab of the Developer Console, and show "Generated" components (because the scrollbars are considered generated). You should see that anything that has a visible scrollbar has an instance of one of the Scrollbar classes.

If none of this is working as expected, it's time to see if someone has inserted some kind of low-level hack into application codebase, but grepping all of your app code for "scrollbar".

[stonebranch2]

I did search earlier for anything scrollbar related where we might be overriding, but we are not doing that.

I set the default prior to anything being created, and verified the default was set by using the eval() as you suggested.

Without doing anything, that eval shows SpritedScrollbar. You suggested it would show NativeScrollbar. So what does that mean? I changed it to both Scrollbar and MinimalScrollbar before anything is created, no difference. Still looks the same, and looks exactly like your showcase. Do you have a screenshot of what I should be expecting to see here with it as Scrollbar or MinimalScrollbar?

Thanks

[Isomorphic]

Oh, it looks like you never looked at nativeAutoHideScrollbars. If that's set (and it's true by default), we will use NativeScrollbar in order to match the platform's detected behavior.

Turn that off, and the other settings you're trying to use will become active again.

[stonebranch2]

OK,

That seems to have put me in the right direction. Thanks.

In the load_skins.js, instead of changing both of those properties to false like I had originally attempted, I changed only nativeAutoHideScrollbars, and that looks good now.

isc.Canvas.setProperties({
// this skin uses custom scrollbars
groupBorderCSS: "1px solid #b8b8b8",
showCustomScrollbars: true,
nativeAutoHideScrollbars: false
});

I have one slight issue.

If I create a situation where I have both a horizontal and vertical scrollbar, I ended up with a white corner.

Can you help me resolve that?



Regards