Valo: Blocked when using valo theme with layouts + views

I have a question about the theme valo, i defined the master page with more than one layout which divide the ui into some sub sections(header, menu,content), then i add the views on the content panel.

public class MainUI extends UI
{

    public Navigator    navigator;

    @Override
    protected void init(VaadinRequest request)
    {
         MainLayout mainLayout = new MainLayout();
         setContent(mainLayout);
        
         navigator = new Navigator(this, mainLayout.getContentLayout());
         // //navigator = new Navigator(this, this);
         navigator.addView(LoginView.class.getSimpleName(), new LoginView());
[code]
         navigator.navigateTo(LoginView.class.getSimpleName());
[/code]
[code]
    }
}
[/code]

The mainLayout:

public class MainLayout extends VerticalLayout
{
    /**
     *
     */
    private static final long    serialVersionUID    = -5595615126423241729L;
    private VerticalLayout upperSection = new VerticalLayout();
    private HorizontalSplitPanel lowerSection = new HorizontalSplitPanel();
    private VerticalLayout menuLayout = new VerticalLayout();
    private VerticalLayout contentLayout = new VerticalLayout();
    
    public MainLayout()
    {
        initHeader();
        upperSection.addComponent(new Label("Header"));
        menuLayout.addComponent(new Label("Menu"));
        contentLayout.addComponent(new Label("Content"));
        
        lowerSection.addComponent(menuLayout);
        lowerSection.addComponent(contentLayout);
        
        addComponent(upperSection);
        addComponent(lowerSection);
        
        showBorders();
        
        setSizeFull();
        lowerSection.setSizeFull();
        menuLayout.setSizeFull();
        contentLayout.setSizeFull();
        setExpandRatio(lowerSection, 1);       
        // 10% fot the menu, 90% for the content
        lowerSection.setSplitPosition(10);
    }
}

Until now, every thing works well, then i activate the valo theme in the MainUI class, this block the login textfield, with the mouse i can not click on the button/textfield any more, even i disable all the validate rules in LoginView.

LoginView:

public LoginView() {
        super();
        helper = new RequestHelper();
        setSizeFull();
        Panel panel = new Panel("Login Information");
        FormLayout form = new FormLayout();
        tfUsername = new TextField("Login: ");
        tfPassword = new PasswordField("Password: ");
        tfUsername.setRequired(true);
        tfPassword.setRequired(true);
        tfUsername.setRequiredError("Empty not allowed");
        tfPassword.setRequiredError("Empty not allowed");
        tfUsername.addValidator(new StringLengthValidator("Can not be empty", 1, 100, false));
        tfPassword.addValidator(new StringLengthValidator("Can not be empty", 1, 100, false));
        btLogin = new Button("Login");
        //navigator = new Navigator(getUI(),this);
        //navigator.addView(SearchAudioView.class.getSimpleName(), new SearchAudioView());
        
        
        btLogin.addClickListener(new Button.ClickListener() {
        
            @Override
            public void buttonClick(ClickEvent event)
            {
                if(isFormValid())
                {
                    sendRequest();
                }
            }
        });
        
        tfUsername.setTabIndex(1);
        tfPassword.setTabIndex(2);
        btLogin.setTabIndex(3);
        tfUsername.focus();
        form.addComponent(tfUsername);
        form.addComponent(tfPassword);
        form.addComponent(btLogin);
        form.setMargin(true);
        form.setSizeFull();
        addComponent(panel);
        panel.setContent(form);
        panel.setHeight("200px");
        panel.setWidth("250px");
        setComponentAlignment(panel, Alignment.MIDDLE_CENTER);
    }

Is there anything wrong in my code? What is the problem?
Thanks.

19105.jpg
19106.jpg

Try removing (or increasing) the specified width and height of the panel, that should do it.

Thanks for your reply, but still the same problem.
19135.jpg

I also tried to remove the validator, but nothing changed. It works well without the theme valo.

Hey Pierre,

I ran your code but I had to modify it a bit, as there were few missing methods and unknowns in there. Still, I can’t replicate these issues. The login button is clickable and both the login and password fields accept text input.

What Vaadin version are you running? Are you running a “clean” theme?

Thanks you, i use vaadin 7.5.0.alpha1 from maven.
clean theme is also a theme?

Is there any custom styling going on or are you running a non-modified Valo theme?

No, i did’t use anu custom styling yet.

HTML loginview table:

Login: *

Row login: