The min-height property in CSS appears to be ineffective on Jelly Bean

In my current project developing an Android application, I have incorporated Webviews in certain activities and fragments. However, I encountered a perplexing issue when running the app on Jelly Bean (api 16 and 18) emulator - the css property min-height:100vh appears to be disregarded, resulting in a distorted appearance of the webview content. Despite extensive online research, I have been unable to find any solutions to this problem.

Answer №1

It appears that the Android browsers in Jelly Bean (Android 4.1 to 4.3) may not have full support for the vh unit.

You can verify this by visiting: http://caniuse.com/#feat=viewport-units

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

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

Struggling to achieve proper alignment for a series of div tags

I have implemented a code block to read in an image pixel by pixel and display it as a series of div tags arranged in a table-like fashion. The code is mostly inspired by a comment on PHP.net (http://www.php.net/manual/en/function.imagecolorat.php). This i ...

Translucent overlay enhancing image contrast

Currently, I have a container with a background image that turns semi-transparent on hover. Below is the simplified version of my HTML: <div class="container"> <div class="overlay"></div> <img src="hi.jpg"> </div> This ...

What causes Firefox's CPU to spike to 100% when a slideshow begins that adjusts the width and left coordinates of certain divs?

Seeking Advice I'm in need of some help with identifying whether the code I'm working on is causing high CPU usage in Firefox or if it's a bug inherent to the browser itself. The situation is getting frustrating, and I've run out of so ...

Show the JSON output from a POST call

I need to submit a POST request with the specified parameters 'username' and 'password'. My attempt at this is shown below: public static void execute() { Map<String, String> credentials = new HashMap<String, String>() ...

Tips for reducing the JavaScript file size outputted by a liquid template generator

Currently, I am working on enhancing the performance of my Shopify website and GoogleSpeed Insights is suggesting that I minify css and js files. However, the recommended files are all created by the liquid template generator, making it challenging to uti ...

Simplifying my question as "directing to another webpage" is an inadequate description

I am currently customizing my website using a template that includes an element called 'portfolio-filters.' This element is located on my blog page and can be seen in the following image: portfolio-filters When a visitor interacts with these bu ...

Is there a way for me to update the button text and class to make it toggle-like

Is there a way to switch the button text and class when toggling? Currently, the default settings show a blue button with "Show" text, but upon click it should change to "Hide" with a white button background. <button class="btn exam-int-btn">Show< ...

Unnesting Django Endless Pagination in a Twitter-style format, how can I move a div outside of another div?

After implementing Django Endless Pagination with the Twitter Style and Show More option, everything seems to be working smoothly without any issues. I've even included media queries in the HTML render to help visualize the problem more clearly when r ...

Content on the right floating underneath content on the left

Here is the HTML code snippet I am working with: <div id="main_content"> <div id="left_side> <h1> MY BIG HEADER </h1> </div> <div id="content_area"> SOME CONTENT HERE SOME CONTENT HERE S ...

Is there a way to achieve this design using bootstrap?

I am aiming to create a layout similar to this. My goal is to have a fixed sidebar on the left that measures 330px wide. Additionally, I want a gray box positioned at the center of the screen that adjusts its position based on changes in the content above ...

The error "req.user is not defined" occurs when accessing it from an Android

I am currently collaborating with an Android developer to create an android app. While my colleague handles the front-end development, I focus on the backend work. Specifically, I have implemented the login and authentication features using node.js, expres ...

A guide on altering the color of a badge through programming

I am curious to learn how I can dynamically change the color of a badge in Angular. My goal is to initially set the color of the badge to white, and then if the percVLRiskTotal reaches a specific value, change the color to green as an example. CSS: <sp ...

How can you distinguish between images stored on Firebase in an Android app?

Looking to upload a variety of images for different purposes, such as user profiles and category tags. While researching how to upload images in Firebase, I discovered that they are stored in Storage. However, if I want to retrieve all user images, how c ...

Discover the secret to toggling Bootstrap 4 cards visibility when hovering over the navigation menu using CSS

Hey, I'm currently working on a project where I want to show and hide specific sections of cards by just hovering over the menu list. While I can successfully hide the cards using CSS, I am facing issues with displaying them using the display:block pr ...

Creating a set width for the input-group-append division in Bootstrap 4

I am currently utilizing the power of Bootstrap 4's input group feature to position an icon next to an input field. My goal is to set a fixed width of 40px for the div containing the input-group-append (which houses the icon). According to the offici ...

Tips for arranging Angular Material cards in columns instead of rows

I am currently developing a web application using Angular, and I've encountered an issue while trying to display cards in a vertical layout rather than horizontally. My goal is to have the cards fill up the first column (5-6 cards) before moving on to ...

Collect data from website submissions via email

Is it possible to receive the results via email when someone submits their details on my site using a script? My server does not allow .php or .asp files, only .css. How can I achieve this? ...

Rings that react to both width as well as height

Below is a popular CSS markup for creating responsive circles. http://jsfiddle.net/WTWrB/355/ <div class="circle"></div> .circle { width: 25%; height:0; padding-bottom: 25%; -moz-border-radius: 50%; -webkit-border-radius: ...

The use of jQuery addClass does not produce any changes

I am trying to modify a single attribute in my class using a JavaScript function. .msg_archivedropdown:before { content:""; display: block; position:absolute; width:0; height:0; left:-7px; top:0px; border-top: 10px solid tr ...