Why are my DateChoosers not visible in Handset mode?

[mathias]

I really need some help if I'm to get this working...

I have a layout with some datechooser and labels. It all works fine in desktop, But if I set it to handset mode, the datechoosers are not visible.

I've looked around, but can't get it to work. It's very strange to me. If someone could check my test case below, I'd be most grateful!

package com.nuba.client;

import com.smartgwt.client.types.Alignment;
import com.smartgwt.client.types.AnimationEffect;
import com.smartgwt.client.types.VerticalAlignment;
import com.smartgwt.client.util.Browser;
import com.smartgwt.client.widgets.DateChooser;
import com.smartgwt.client.widgets.IButton;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.layout.HLayout;
import com.smartgwt.client.widgets.layout.Layout;
import com.smartgwt.client.widgets.layout.VLayout;

public class TestDateControls {

    public static int spacing = Browser.getIsHandset() ? 10 : 20;

    public void onModuleLoad() {
        //Browser.setIsHandset(true);

        IButton action = new IButton("Hello");
        IButton cancel = new IButton("Goodbye");

        DateRangeChooserFilterLayout layout = new DateRangeChooserFilterLayout(action, cancel);

        Layout main = (Layout) new HLayout().setWidth100().setHeight100();

        main.addMember(layout);
        main.draw();
    }

    private class DateRangeChooserFilterLayout extends VLayout {
        public DateRangeChooserFilterLayout(IButton actionButton, IButton cancelButton) {
            setAnimateShowEffect(AnimationEffect.FADE).setAnimateFadeTime(500);
            setAutoWidth();
            setAutoHeight();
            setMembersMargin(WebConstants.getLargeSpacing());

            DefaultLabel headerLabel = new DefaultLabel("Select Period", null, Alignment.LEFT);
            headerLabel.setPadding(15);
            headerLabel.setWidth100();
            headerLabel.setAlign(Alignment.CENTER);
            headerLabel.setMinWidth(250);
            headerLabel.setLayoutAlign(Alignment.CENTER);
            addMember(headerLabel);


            Layout dateChooserComponentsLayout = new HLayout();

            DefaultLabel endText = new DefaultLabel("To: ", null, Alignment.LEFT);
            endText.setAutoWidth();

            DateChooser beginChooser = new DateChooser();
            DateChooser endChooser = new DateChooser();

            dateChooserComponentsLayout.addMember(beginChooser);
            dateChooserComponentsLayout.addMember(endText);
            dateChooserComponentsLayout.addMember(endChooser);

            dateChooserComponentsLayout.setAutoWidth();
            addMember(dateChooserComponentsLayout);

            Layout buttonLayout = new DefaultHLayout();
            buttonLayout.setAutoHeight();
            buttonLayout.setMembersMargin(spacing);
            buttonLayout.setLayoutAlign(Alignment.CENTER);
            buttonLayout.setAutoWidth();

            if (actionButton != null) {
                buttonLayout.addMembers(actionButton, cancelButton);
            }
            addMember(buttonLayout);
        }
    }

    public class DefaultLabel extends Label {

        public DefaultLabel(String text, String styleName) {
            super(text);
            setAutoHeight();
            setCanFocus(false);
            if (styleName != null) {
                setStyleName(styleName);
            }
        }

        public DefaultLabel(String text, String styleName, Alignment align) {
            this(text, styleName);
            setAlign(align);
        }

        public DefaultLabel(String text, String styleName, Alignment textAlign, int width) {
            this(text, styleName, textAlign);
            setWidth(width);
        }
    }

    public class DefaultVLayout extends VLayout {
        public DefaultVLayout() {
            setAutoHeight();
            setWidth100();
            setMembersMargin(spacing);
            setDefaultLayoutAlign(Alignment.LEFT);
            setAlign(Alignment.LEFT);
            setAlign(VerticalAlignment.TOP);
            setLayoutAlign(Alignment.LEFT);
        }
    }

    public class DefaultHLayout extends HLayout {

        public DefaultHLayout() {
            this(null);
        }

        public DefaultHLayout(String groupName) {
            super();
            setAlign(Alignment.LEFT);
            setDefaultLayoutAlign(VerticalAlignment.CENTER);
            setAutoHeight();
            setAutoWidth();
            setMembersMargin(spacing);
            if (groupName != null) {
                setIsGroup(true);
                setGroupTitle(groupName);
                setPadding(spacing);
                //smartgwt doesn't support to set a style for the border, so we have to hard-code it here
                setGroupBorderCSS(WebConstants.DEFAULT_BORDER);
            }
        }
    }
}

[Isomorphic]

In Handset mode, DateChoosers are designed to be rendered fullscreen by default. This is appropriate for the standard usage for (say) a dateItem where they will pop up in response to the user clicking the appropriate icon.
However this is implemented by setting width and height to 100%, and setting overflow to hidden.
This is conflicting with your usage where the parent layout has setAutoWidth/setAutoHeight set - basically render at natural size. The layouts are rendering as small as possible, leaving just one pixel for the DateChoosers, which, since they're overflow:"hidden" don't overflow this.

We'll consider whether there's a good framework change we can make here to better handle this use case, but a quick workaround is just to reset the overflow for the dateChoosers on draw.
Try adding this to your code:

            DateChooser beginChooser = new DateChooser();
            beginChooser.addDrawHandler(new DrawHandler() {

                @Override
                public void onDraw(DrawEvent event) {
                    event.getFiringCanvas().setOverflow(Overflow.VISIBLE);

                }
            });
            DateChooser endChooser = new DateChooser();
            endChooser.addDrawHandler(new DrawHandler() {

                @Override
                public void onDraw(DrawEvent event) {
                    event.getFiringCanvas().setOverflow(Overflow.VISIBLE);

                }
            });

[mathias]

Tried it and it works, thanks! Yeah, it could totally make sense with more flexibility here. Cheers