What methods can I use to ensure that content is not obstructed by the Android virtual keyboard? Leveraging Bootstrap

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.

Answer №1

When the device keyboard is activated, it causes a decrease in the actual viewport size which may result in the issue you are currently experiencing.

Resolution: To address this issue, you should implement a height-based CSS media query. This will allow you to adjust the CSS styles based on the viewport size when the keyboard is open.

Example: Below is a sample media query that checks the viewport height and applies a black background to all elements:

@media screen and (max-height: 200px){ //Change 200 to actual viewport height after keyboard opens
  *{
    background-color: #000;
  }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML string decoded incorrectly in CodeIgniter due to encoding error

When I send data that includes an HTML string along with other information from JavaScript to the PHP (Codeigniter) server using AJAX and JSON, I notice that the style information within the HTML string is missing once it reaches the server. Everything els ...

Using canvas in Bootstrap can lead to columns wrapping onto the next line due to margins

My goal is to align two charts side by side with some padding or margins between them. It seems to work fine when the columns contain text, but I'm running into issues when using the canvas tag. Whenever I try to add space between the charts, they end ...

Designing a flawless CSS pattern for the online world

Currently, I am working on creating a seamless CSS pattern for the web. Even though this may seem impractical and nonsensical, I find joy in experimenting with it. View my progress here After successfully designing my first tile, my next challenge is to ...

Utilizing Bootstrap 3: Achieving Varied Font Sizes within a Row with Bottom Alignment

Just starting out with Bootstrap and looking to create a layout with two columns of text in the same row, where the first column has a larger font size than the second. However, I'm running into an issue where the text in the second column is position ...

"the content does not occupy the entire space of the parent

My TableRow expands across the width of the screen, and within it is a ListView with a layout_width set to match_parent. However, the ListView does not expand properly. This issue arose when I added two buttons in the next TableRow. Even after setting the ...

Modifying the dimensions of an image within a :before pseudo-element

Currently, I am working on designing a mobile menu and encountered an issue with resizing the image of the hamburger menu button. Despite attempting to adjust it by following some suggestions such as this one: How to Resize Image Using CSS Pseudo-elements ...

Guide on creating a stationary side navigation bar in HTML with Bootstrap 5 and CSS

I am developing a website with a fixed side navigation bar that stays in place when scrolling through the content section. I experimented with both the fix-position in Bootstrap 5 and CSS methods, but no matter how I set it up, the side bar remains transpa ...

CSS Flexibility in Action

Presently, my tab bar has a fixed look as shown here: https://codepen.io/cdemez/pen/WNrQpWp Including properties like width: 400px; etc... Upon inspecting the code, you'll notice that all the dimensions are static :-( Consequently, I am encountering ...

What is the way to modify the standard request for an "@" in the email address?

Although I've successfully changed the error message for when the user forgets to type in their email, I'm now wondering how to modify it when the user enters their email in the wrong format. Below is the code I've written in the style of B ...

When using a Kendo Grid with a Checkbox as a column, the focus automatically shifts to the first

Whenever I select a checkbox in my Kendo grid, the focus automatically shifts to the first cell of the first row. How can I prevent this from happening? Here is the code I am currently using when a checkbox is checked: $('#approvaltranslistview' ...

Why is it that @font-face fails to function properly even after being defined correctly?

Here's the @font-face code I've been using: @font-face { font-family: "NotesEsa-Bold"; src: url("C:\Users\test\Desktop\Webpage\Fonts\NotesEsaBol.ttf") format("truetype"); /* Safari, Android, iOS */ font-we ...

Unable to choose anything beyond the initial <td> tag containing dynamic content

Struggling to implement an onclick delete function on dynamically selected elements, but consistently encountering the issue of only selecting the first element each time. // Function for deleting entries $("#timesheet").on('click', &ap ...

Managing web-based PDF documents with images that require authentication

Currently, I am generating PDF documents on the server side using wkhtmlpdf and nodejs. The HTML to be rendered is sent from the client side, which may contain img tags with a source. When the user previews the HTML in the browser, the images they have upl ...

Python Webscraping using Selenium

I'm experiencing difficulties webscraping the list of DAOs from masari.io due to some errors that I encountered: DeprecationWarning: executable_path has been deprecated, please pass in a Service object driver = webdriver.Chrome(options=options, exec ...

Quantify the Proportion of Affirmative/Negative Responses and

I am attempting to calculate the percentage of "Yes" or "No" responses in an HTML table based on user input for each month's questions. Then, I want to display the average percentage in the "average" column for each month. For example, if the user sel ...

Struggling to target specific elements in CSS that are dynamically generated through JavaScript

After using JavaScript to generate some divs, I ended up with the following code: const container = document.querySelector('#container'); for(let i = 1; i < 17; i++) { var row = document.createElement('div'); row.id = 'r ...

Discovering whether an image contains a caption with the help of JavaScript

There are various websites that display captions on images in paragraphs, h1 tags, or contained within a div along with the image. I am interested in learning how to determine if an image has an associated caption using JavaScript, especially when the cap ...

Utilizing CSS variables and HSLA, create a distinctive linear gradient styling

I am encountering an issue with a CSS variable: :root{ --red: hsl(0, 100%, 74%); } Despite defining the variable, it does not work in the following code snippet: .page-wrapper{ background-image: linear-gradient(hsla(var(--red),.6), hsla(var(--red),.6 ...

AngularJS bidirectional binding with numerous select choices

I am faced with a unique challenge - I have a list of non-exclusive fields that users want to see presented in a select box allowing multiple selections, rather than individual checkboxes bound to Boolean values in the model. While I know how to create t ...

How can I retrieve the text from two DIV elements simultaneously using JS/jQuery?

Is there a way to loop through all <TD> elements in order to store the Title and Link from each element into separate variables using JavaScript / jQuery? Sample HTML: <td> <div class="class_Title row border-bottom" name="name_Title" i ...