Baffled because of browser differences in setSizeFull() ...

I am sure this is something weird just with me. But if someone can shed some light on it, I will appreciate it.

I am seeing the UI of my simple Application differently on Safari and Firefox based on what I do to setSizeFull().

Here's the code:

@SuppressWarnings("serial")
public class AdminMainWindow extends Application
{
    private final Window window = new Window();

    @Override
    public void init()
    {
        super.setMainWindow(window);
        LoginForm login = new LoginForm();
        login.setWidth("100%");
        login.setHeight("300px");
        login.setSizeFull();
        layout(window, login);
        login.addListener(new LoginForm.LoginListener() {   
            public void onLogin(LoginForm.LoginEvent event) {
                window.getWindow().showNotification(
                        "New Login",
                        "Username: " + event.getLoginParameter("username")
                                + ", password: "
                                + event.getLoginParameter("password"));
            }
        });
    }
    private void layout(Window w, LoginForm lf) {
        VerticalLayout v = new VerticalLayout();
        v.setSpacing(true);
        w.setContent(v);
        w.addComponent(lf);
        OptionGroup og = new OptionGroup();
        og.setMultiSelect(false);
        og.setSizeFull();
        og.addItem("Super User");
        og.addItem("Directory");
        v.addComponent(og);
    }
    
}

With this code, I see only the OptionGroup rendered on Safari whereas Firefox renders both LoginForm and OptionGroup. Is it just me?

Thanks.

Just to confirm that I see it as a problem with setFullSize() i.e. line# 14 in the code below, that when the line is commented out, the UI is rendered with both the components on both the browsers.

why you call login.setSizeFull(); if in two lines above you set the explicit W/H for the same component ?
calling setSizeFull() overrides your seytWidth / setHeight above, settings them to 100% both.

I think I have to do better at the layout, but the real question is about the browser differences.

Also, when I remove the setWidth/setHeight, the behaviour is still the same. Commenting out setSizeFull() makes Safari and Firefox behave the same way. With that line in there, only Firefox shows both LoginForm and OptionGroup.

Hi,

To get a report of layouting problems in the currently visible layouts, enable debug mode by adding ?debug to your application URL, and use the Analyze layouts button to see the report.

For more information about the debug mode and analyze layouts, see section 11.4 from the Book of Vaadin. Also, section 6.10 about layout formatting may be good reading :)

-Henri

Kedar Mhaswade: I think I have to do better at the layout, but the real question is about the browser differences.

As Henri pointed out, there's an invalid layout configuration at play here. You're using a relatively sized component inside an undefined sized layout, which results in zero sizes for the contained component (in most cases). But since these invalid situations are impossible to figure out exactly what the expected result would be, the behavior is undefined by the Vaadin layout specification.

And because of that, browser differences are let loose to handle the situation pretty much as they see fit. Safari renders the view as I would expect, where a 100% high element inside an undefined DIV is rendered 0px high, whereas Firefox probably applies some security exceptions and makes the otherwise hidden IFRAME visible (which is used to render the LoginForm).

Kedar Mhaswade: Also, when I remove the setWidth/setHeight, the behaviour is still the same. Commenting out setSizeFull() makes Safari and Firefox behave the same way. With that line in there, only Firefox shows both LoginForm and OptionGroup.

That's expected as well, since

component.setSizeFull();

is just a shorthand method for

component.setWidth("100%");
component.setHeight("100%");

hence overriding any previously set width and height.