表单布局在移动设备上不灵活

如何解决表单布局在移动设备上不灵活

我正在移动设备（huawei p30 pro）上测试vaadin应用程序的注册屏幕。对于注册过程，我使用表单“铁表单”元素。我将其放入垂直布局。通常，屏幕上始终有一个导航栏。在桌面视图上，导航栏显示在顶部，在移动设备上，导航栏显示在屏幕的底部。但是，当我打开键盘（android的Softkeyboard）时，导航栏被向上推到屏幕顶部，注册表单的垂直布局在我无法在垂直布局内滚动的意义上表现不合理。例如，当我打开键盘时，如果我向下注册按钮，则无法向上滚动到屏幕顶部的用户名文本字段。导航栏与视图重叠（在第二张图片中实现，电子邮件字段上方的文本字段不可见且不可滚动）。我该如何解决？预先感谢。.

键盘打开后

我的注册页面如下：

@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%;
}