I am currently tackling an issue with my 'navbar' layout that looks like this:
<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>
<!-- Login form -->
<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="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4a424e4643&email; protected</a>">
</div>
<div class="form-group">
<label for="exampleDropdownFormPassword1">Password</label>
<input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="dropdownCheck">
<label class="form-check-label" for="dropdownCheck">Remember me</label>
</div>
<button type="submit" class="btn btn-primary">Login</button>
</form>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">First time here? Register now!</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search..." aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
While the navbar functions perfectly on desktop, there is an issue on mobile devices. The problem arises when clicking on 'Login' in the navbar, as the virtual keyboard covers most of the login form when the input field is selected. I aim for the Android virtual keyboard to push the login form upwards instead.
I attempted to address the problem by specifying the relative position of the element containing the form. This is what I did:
<div class="dropdown-menu" id="loginDropdown" style="max-height:200px; overflow-y:auto; position: relative">
However, the issue persists despite my efforts. Thank you for your assistance.