12.0p Canvas.overflow and Overflow.clip-h question

[Blama]

Hi Isomorphic,

we are fighting with some non-reproducible most likely zoom related reflow-redraw-flickering happening at the customer's site.

It's pretty annoying, but we can't forbid to use browser zoom, so we need to be as resilient against this as possible.
Having a warning here would of course be good, but not heal the problem.
Warning plus User-configured window.fontResize / window.controlResize in load_skin.js, like you do in the Showcase with isc.Canvas.resizeFonts() and isc.Canvas.resizeControls(). would be the best, but still, users might use browser zoom. So in order to keep the complaints here away, we need to minimize the amount of issues here as good as possible.

(We b.t.w. have a setting for window.fontResize / window.controlResize for the whole system, but not per user so far. It's working fine. I know about this from your blog post here and do see the methods in the SmartGWT docs. I can't find them in the SmartClient Canvas docs, though. Can you tell me where it is there?)


If we can limit the places where this might occur, this would be enough for now.

I'm already doing this:

        ListGrid lg = new ListGrid() {
            {
                // Wastes a bit of space, but will get rid of all zoom related ListGrid flickering. If the vertical scrollbar is always shown, showing a
                // horizontal one can not trigger it, possibly ending in an resize and redraw loop.
                setLeaveScrollbarGap(true);
        };
        ListGrid.setDefaultProperties(lg);

This helps for cases, where this happens in ListGrids, because if one bar is always (or never) present, I have the feeling that this issue is gone.
This is fine for ListGrids.

Also, Layouts and their children (HLayout, VLayout, Window) should be fine by default, as they have a default of overflow:visible, so no scroll bars here.

The other area where I spot the problem is TabSets.
paneContainer has a default of overflow.auto (found via Watch Tab + Evaluate JS Expression "isc_TabSet_1_paneContainer.overflow;")

Setting this to overflow:"visible", which I can do with

        windowTabSet.setPaneContainerProperties(new Canvas() {
            {
                setOverflow(Overflow.VISIBLE);
            }
        });

heals this in cases where I have known height content not needing scrollbars ever. With this, also zoom won't introduce issues which are there with default settings.

But if I do have scrollable content, this always is vertically scrollable. As overflow.clip-h can only show one scrollbar, this should heal my issues there as well. But it seems that overflow.clip-h is not supported here. The docs also say "Note: only supported for specific widget subclasses.".

My questions are now:

• How do I find out which Widgets support overflow.clip-h?
• Can you support overflow.clip-h for TabSet.paneContainer or is it already supported (does not seem so)?

Thank you & Best regards
Blama

[Isomorphic]

clip-h is not supported by the TabSet. Very few widgets support it, and it's a non-starter for you here, since it is not supported for zooming anyway (and may never be - forest of browser bugs in that direction).

We would definitely recommend warning users against zoom and offering density settings instead, which is a far better solution. Canvas.resizeFonts() is found easily via search in the SmartClient docs - not sure what happened when you looked.

[Blama]

Hi Isomorphic,

thanks for the fast answer. I'll try to solve my problem without clip-h then. Nevertheless it would be interesting to know where this is supported (in general, not in combination with zoom).

The problem with density settings is that end users are used to Ctrl-MouseWheel to zoom. Without a warning this is definitely not a replacement, which is why I think it's good to have this warning by default (best with an i18n warning message that one can use to hint to the place where the density settings are).

I'm not sure why I did not see resizeFonts(). Now I find it. It must have been because of instance/class methods or because I wrote "fontResize".

Best regards
Blama