"animateResize" doesn't resize "parent layout"

[pavo123]

Hi Isomorphic,

please take a look at this test case.
Label "Powered by " is not visible in this case.
INHO in this case "animateResize" should resize height of "parent layout" as well and label "Powered by " should always be visible.
SmartClient Version: v12.0p_2019-12-07/PowerEdition Deployment (built 2019-12-07)

package com.smartgwt.sample.client;

import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.types.Overflow;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.PageKeyHandler;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.events.ClickEvent;
import com.smartgwt.client.widgets.events.ClickHandler;
import com.smartgwt.client.widgets.layout.VLayout;

public class BuiltInDS extends VLayout implements EntryPoint {

    public void onModuleLoad() {
        KeyIdentifier debugKey = new KeyIdentifier();
        debugKey.setCtrlKey(true);
        debugKey.setKeyName("D");

        Page.registerKey(debugKey, new PageKeyHandler() {
            public void execute(String keyName) {
                SC.showConsole();
            }
        });

        VLayout mainVlayout = new VLayout();
        mainVlayout.setWidth(190);
        mainVlayout.setHeight(700);

        VLayout parentVL = new VLayout();
        parentVL.setWidth(190);
        parentVL.setHeight100();
        parentVL.setOverflow(Overflow.AUTO);
        mainVlayout.setMembers(parentVL);

        VLayout vl = new CustomVLayout();
        parentVL.setMembers(vl);
        setMembers(mainVlayout);
        draw();
    }

    private class CustomVLayout extends VLayout {
        public CustomVLayout() {
            setWidth100();
            setHeight(100);
            setOverflow(Overflow.CLIP_H);

            ChildVLayout childVLayout1 = new ChildVLayout("blue");
            ChildVLayout childVLayout2 = new ChildVLayout("yellow");
            ChildVLayout childVLayout3 = new ChildVLayout("black");
            childVLayout3.animateResize(null, 400);

            Label poweredByLabel = new Label("Powered by ");
            poweredByLabel.setOverflow(Overflow.CLIP_H);

            setMembers(childVLayout1, childVLayout2, childVLayout3, poweredByLabel);
        }
    }

    private class ChildVLayout extends VLayout {
        public ChildVLayout(String backgroundColor) {
            setHeight(200);
            setOverflow(Overflow.CLIP_H);
            setBackgroundColor(backgroundColor);
            addClickHandler(new ClickHandler() {
                @Override
                public void onClick(ClickEvent event) {
                    if (event.getFiringCanvas().getHeight() != null && event.getFiringCanvas().getHeight().equals(200)) {
                        animateResize(null, 400);
                    } else {
                        animateResize(null, 200);
                    }
                }
            });

        }
    }
}

Best regards
Pavo

[Isomorphic]

We see the behavior you report and will update this thread when more is known.

[Isomorphic]

As mentioned here, Overflow.CLIP_H and CLIP_V have limited support. In this case, that manifests as the overflow adjustments not chaining up the widget hierarchy. Is there a reason you can't instead use overflow:"visible"?

[Blama]

Hi Isomorphic,

the problem here is that this is the menu area, which should not waste screen real estate.
Depending on the user we have different numbers of menu items. Because of this or because of low resolution we sometimes have to show a v scrollbar.

We wanted to go with invisible scrollbars first, which is not supported and might be confusing and an accessibility violation, like you write here.

Now we know that the h-size will never change, so we never need scrollbars here - unless introducing v-scrollbars will in turn introduce h-scrollbars. This then looks really bad. In this case we just want to clip h, as we know that we are never cutting of important stuff. You also suggested this here.

I'll try now with overflow: "visible" and report back.

Best regards
Blama

[Blama]

Hi Isomorphic,

for us, this does not work as it introduces a h-scrollbar nevertheless.
I have an other idea we could try (make all inner Layouts less wide and centered in their parent Layout) but of course it would be best if the CLIP_H just worked.

Best regards
Blama

[pavo123]

Hi Isomorphic,

what is the status of this thread?
Are you planning to solve this problem? Or I should go for a workaround.

Best regards
Pavo

[Isomorphic]

CLIP_H continues to have limited support, so you cannot rely on it here in the way you want.