Блог

Я тестирую экран регистрации моего приложения vaadin на своем мобильном устройстве (huawei p30 pro). Для процесса регистрации я использую элемент формы «iron-form». Я поместил это в вертикальный макет. В общем, на экране всегда есть панель навигации. На рабочем столе панель навигации отображается вверху, а на мобильных устройствах она отображается в нижней части экрана. Однако, когда я открываю клавиатуру (программную клавиатуру Android), панель навигации перемещается вверх по верхней части экрана, а вертикальная компоновка регистрационной формы не работает разумно, в том смысле, что я не могу прокручивать внутри вертикальной компоновки. Например, когда я открываю клавиатуру, если я нажимаю кнопку регистрации, я не могу прокрутить текстовое поле имени пользователя в верхней части экрана. Панель навигации перекрывается с представлением (реализовано на втором рисунке, текстовое поле над полем электронной почты не видно и не прокручивается). Как я мог это исправить? Заранее спасибо..

После открытия клавиатуры

Моя страница регистрации выглядит следующим образом:

 @Route(value = "registration", layout = MainView.class)
@RouteAlias(value = "registration", layout = MainView.class)
@CssImport("./styles/views/login/registration.css")
public class Registration extends Div implements AfterNavigationObserver {

private static final long serialVersionUID = -1223086666624645746L;

public Registration() {
    UI.getCurrent().getPage().executeJs("document.getElementById('submitbutton')"
              ".addEventListener('click', () => document.getElementById('ironform').submit());");

    Element ironForm = createRegistrationFormComponent();
    getElement().appendChild(ironForm);

    setClassName("registration-view");
}

private Element createRegistrationFormComponent() {
    VerticalLayout loginLayout = new VerticalLayout();
    loginLayout.setClassName("registration-form-layout");
    loginLayout.add(createUsernameLabel(), createUsernameField(), createEmailLabel(), createEmailField(),
            createPasswordLabel(), createPasswordField(), createPasswordLabel2(), createPasswordField2(),
            createRegisterButton());
    
    FormLayout formLayout = new FormLayout();
    formLayout.add(loginLayout);

    Element formElement = new Element("form");

    formElement.setAttribute("method", "post");
    formElement.setAttribute("action", "login");
    formElement.appendChild(formLayout.getElement());

    Element ironForm = new Element("iron-form");

    ironForm.setAttribute("id", "ironform");
    ironForm.setAttribute("allow-redirect", true);

    ironForm.appendChild(formElement);
    return ironForm;
}
  

Мой css-файл для регистрационной формы выглядит следующим образом:

 .registration-view {
display: flex;
vertical-align: middle;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow-y: auto;
background-color: var(--lumo-shade-5pct);}

.registration-form-layout {
vertical-align: right;
align-items: right;
justify-content: right;}

.submitButton {
width: 100%;
background-color: var(--lumo-success-color);
color: white;
margin-bottom: 55px }
  

Также мой файл css для панели навигации

 .navbar {
width: 100%; //
fallback width: 100vw;
padding-right: 2%;
padding-left: 1%;
}