Vaadin LoginForm layout - HTML

I'm facing problem trying to set horizontal layout to LoginForm of Vaadin. The only solution for which I have an idea is overriding getLoginHTML() class so that it return the proper code. I've added style="float:left" which worked for me in normal html.

The changed part of code looks like this:

(...) + "<div class='v-app v-app-loginpage' style=\"background:transparent;\">"
        + "<iframe name='logintarget' style='width:0;height:0;"
        + "border:0;margin:0;padding:0'></iframe>"
        + "<form id='loginf' targe开发者_JAVA百科t='logintarget' onkeypress=\"submitOnEnter(event)\" method=\"post\">"
        + "<div style=\"float: left;\">"
        + getUsernameCaption()
        + "</div><div style=\"float: left;\">"
        + "<input class='v-textfield' style=\"float: left;\" type='text' name='username'></div>"
        + "<div style=\"float: left;\">"
        + getPasswordCaption()
        + "</div>"
        + "<div style=\"float: left;\"><input class='v-textfield' style='display:inline; float:left;' type='password' name='password'></div>"
        + (...)

And that behaves in a weird way - UserField and PasswordLabel are in the same line - all others are in a separate lines. So it looks like that:

UsernameLabel

UserField PasswordLabel

PasswordField

Button

And as I said I would like it to be algined horizontally... any ideas?

---

The are any reason, why you should use LoginForm. Because if answer is no, you can use Vaadin simple Form, it allow you make your form layout more flexible. For example

public class FormBean{
private String username, password;

//getters and setters
}


    HorizontalLayout newLayout = new HorizontalLayout();

    Form form = new Form(newLayout){
        @Override
        protected void attachField(Object propertyId, Field field) {
            String fieldName = (String) propertyId;

            if(fieldName.equals("username")){
                Label usernameLabel = new Label("username: ");
                newLayout.addComponent(usernameLabel);
                newLayout.addComponent(field);
            }
        }
    };
    form.setItemDataSource(new FormBean());
    form.setFormFieldFactory(new FormFieldFactory() {

        @Override
        public Field createField(Item item, Object propertyId, Component uiContext) {
            String fieldName = (String) propertyId;
            if(fieldName.equals("username")){
                TextField field = new TextField();
                field.setImmediate(true);
                //Here your can add some validations on "fly", for example is username allow only latin characters
                field.addListener(new TextChangeListener() {

                    @Override
                    public void textChange(TextChangeEvent event) {
                        String currentText = event.getText();
                        //Here go validation
                    }
                });
            }
            return null;
        }
    });

Inside formFieldFactory you can set if field required, set some validator and etc. If you want to set some sort of validation I recommended use Vaadin add-on BeanValidationForm, it allow using annotations inside POJO object with used to form creation set some rules, for example @NotNull, @Max, @Min and etc.

@NotNull(message = "Username required")
private String username = "";

@NotNull(message = "Password required")
private String userpass = "";