Как я могу предотвратить затенение контента виртуальной клавиатурой Android? Начальная загрузка 4

Я решаю следующую задачу. У меня есть "навигатор", как это:

<nav class = "navbar navbar-expand-lg navbar-dark bg-dark">
<button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = "#navbarTogglerDemo01" aria-controls = "navbarTogglerDemo01" aria-expanded = "false" aria-label = "Toggle navigation">
    <span class = "navbar-toggler-icon"></span>
</button>
<div class = "collapse navbar-collapse" id = "navbarTogglerDemo01">
    <a class = "navbar-brand" href = "#">PPŘ</a>
    <ul class = "navbar-nav mr-auto mt-2 mt-lg-0">
        <li class = "nav-item active">
            <a class = "nav-link dropdown-toggle" href = "#">ŠKOLENÍ<span class = "sr-only">(current)</span></a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link dropdown-toggle" href = "#">ODKAZY</a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link dropdown-toggle" href = "#">LEGISLATIVA</a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link dropdown-toggle" href = "#">INFO PORTÁL</a>
        </li>
        <li class = "nav-item dropdown">
            <a class = "nav-link" href = "#login" data-toggle = "collapse" role = "button"
                data-toggle = "dropdown" data-target = "#loginDropdown" aria-haspopup = "true" aria-expanded = "false">Přihlásit se</a>
            <!-- Přihlašovací formulář -->
            <div class = "dropdown-menu" id = "loginDropdown" style = "max-height:200px; overflow-y:auto; position: relative">
            <form class = "px-4 py-3">
                <div class = "form-group">
                    <label for = "exampleDropdownFormEmail1">Email</label>
                    <input type = "email" class = "form-control" id = "exampleDropdownFormEmail1" placeholder = "[email protected]">
                </div>
                <div class = "form-group">
                    <label for = "exampleDropdownFormPassword1">Heslo</label>
                    <input type = "password" class = "form-control" id = "exampleDropdownFormPassword1" placeholder = "Heslo">
                </div>
                <div class = "form-check">
                    <input type = "checkbox" class = "form-check-input" id = "dropdownCheck">
                    <label class = "form-check-label" for = "dropdownCheck">Pamatuj si mně</label>
                </div>
                    <button type = "submit" class = "btn btn-primary">Login</button>
            </form>
            <div class = "dropdown-divider"></div>
                <a class = "dropdown-item" href = "#">Jsi zde po prvé? Registruj se!</a>
            </div>
        </li>
    </ul>
    <form class = "form-inline my-2 my-lg-0">
        <input class = "form-control mr-sm-2" type = "search" placeholder = "Hledej..." aria-label = "Search">
        <button class = "btn btn-outline-success my-2 my-sm-0" type = "submit">Vyhledat</button>
    </form>
</div>

На стационарном компьютере работает безупречно. Но проблема в мобильном устройстве. После нажатия на кнопку «Войти» на панели навигации откроется форма входа. Проблема возникает, когда вы нажимаете на поле ввода этой формы и открывается виртуальная клавиатура, которая закрывает почти всю форму входа. Я хотел бы, чтобы виртуальная клавиатура Android нажимала эту форму входа друг над другом.

Я попытался решить проблему. Определите относительное положение элемента с формой. Так:

<div class = "dropdown-menu" id = "loginDropdown" style = "max-height:200px; overflow-y:auto; position: relative">

Однако проблема не может быть решена. Большое спасибо.