The Percentage Value for Height in CSS is Unresponsive on Android Application Interface

I am currently working on an app that displays screen content in HTML format, which is pulled from a database. To ensure compatibility with various devices, I need to use percentages for the width and height of the elements. However, I have been facing issues with getting the height percentage to work properly in any components. I have simplified the layout for troubleshooting purposes and provided the code below. The different background colors assigned to elements help me visualize the impact of code modifications.

In the screenshot accompanying this message, you can see that the yellow background should be showing at 100% height if the code were working correctly. Below is the simplified display code:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> 
<html lang="en"> 
<head>
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style> 
*{ margin:0; padding:0;}       
html { width:100%; min-height:100%; background:yellow;}          
body { width:100%; min-height:100%; background:red;} 
</style>
</head>
<body>

<table style="height: 100%; background:white;">
<tr >
<td width="275" height="200" bgcolor="blue"></td>
<td width="275" height="200" bgcolor="brown"></td>
</tr>

<tr>
<td colspan="2" width="450" height="300" bgcolor="green"></td>
</tr>

<tr>
<td colspan="2" width="450" height="300" bgcolor="black"></td>
</tr>
</table>

</body>
</html>

Attached is a screen shot of how the app appears on a Nexus 7:

Any assistance in resolving this issue would be greatly appreciated. Thanks!

Cayce

Here is the Android Project Manifest.XML code:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.paulistpress.ordo"
    android:versionCode="3"
    android:versionName="1.3" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="18" />

    <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:smallScreens="true"
        android:xlargeScreens="true" />

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="com.android.vending.BILLING" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

    <application
        android:allowBackup="true"
        android:hardwareAccelerated="false"
        android:icon="@drawable/icon"
        android:label="@string/app_name"
        android:largeHeap="true"
        android:theme="@style/AppBaseTheme" >
        <activity
            android:name="Splash"
            android:label="@string/app_name"
            android:screenOrientation="portrait" 
            android:theme="@android:style/Theme.NoTitleBar.Fullscreen">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name="OrdoAppActivity"
            android:screenOrientation="portrait"
            android:windowSoftInputMode="adjustPan" >
        </activity>
    </application>

</manifest>



>>>>>>>>>>> Two places of WebView codes, as per my notes >>>>>>
    <WebView
        android:id="@+id/view_about"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="88" />

    <WebView
        android:id="@+id/view_symbols"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="88" />

Answer №1

The issue probably lies within the WebView/Layout that has not been included in your post. Please provide the Layout.

There may be padding or margins set on the Views, or the webview height may not be set to match_parent.

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

The vertical alignment of the button text with SVG is not properly aligned

I'm facing a challenge in vertically centering text in a button while also using SVG. The text is centered properly when the SVG is removed. How can I maintain the SVG size and still achieve vertical text centering? https://i.sstatic.net/PJRtR.png ...

CodeMirror version 5.62.3 is experiencing some challenges with the scrollbar functionality, editor size, and line wrapping

During my HTML/CSS/JS coding session, I encountered a challenge with CodeMirror version 5.62.3. Specifically, I was striving to make the scrollbar visible in the code editor, using C# as the language mode. However, despite setting the editor's height ...

Issues with BroadcastReceiver causing startup failures when initializing basic Service

I've been working on this issue for quite some time now, but I can't figure out why it's not functioning correctly. My goal is to launch a service when the device starts up using a BroadcastReceiver. However, every time the device boots up, ...

When initially loaded, the Bootstrap Datepicker displays an inaccurate calendar

I implemented Bootstrap Datepicker to insert a date input field into my HTML document. Below is the code I used: HTML: <input type="text" name="manifest-date" class="calendar form-control" placeholder="M-d-yy" id="manifest-date" value="{{$currentDate} ...

Unexpected blank space detected at the bottom of the page in Angular 13

Using the NGX-ADMIN template built on Angular 12 has been smooth sailing until an upgrade to Angular 13. With this simple version change, I am now faced with a perplexing issue that I can't seem to pinpoint or resolve. I can confidently say that shif ...

Does anyone know why this code isn't functioning properly on Firefox?

This code performs as intended in Chrome, but unfortunately does not function properly in Firefox. ul { list-style:none; } li { display:inline-block; border:1px solid black; } a { display:block; margin:10px; } a:hover { positio ...

Enhance React scrollbar functionality without relying on third-party dependencies

Currently working on enhancing the appearance of the scrollbar within my ReactJS project. Specifically, I am aiming for a design similar to this example: https://i.stack.imgur.com/2Q0P4.png Experimented with CSS properties like -webkit-scrollbar, -webki ...

Choose the tag that involves an empty text box

I have created a form that pulls data from the database and displays a list of students. However, I am facing an issue with inputting individual scores for each student. The form only allows me to insert one score, which then gets applied to all students i ...

Ways to update the color of the mat-dialog-title using the material theme

Currently, I am utilizing the Angular Material Dialog and have been attempting to dynamically change the title color of the dialog based on the material theme. <h1 mat-dialog-title color="primary">{{ title }}</h1> Even though setting ...

Struggling to implement CSS variables across different browsers

I'm struggling to make CSS variables function properly, here is what I have so far: :root { --primary-color: #ffcd600; --spacing: 10px; --blur: 10px; } img { padding: var(--spacing); background: var(--primary-color); } When I check the el ...

Utilizing Django for tables with over two items in a template

I've been on the lookout for a solution to create a Django template that can display more than just 2 values per row in a table. Imagine having a class with 5 attributes, and wanting these attribute values showcased in a table on your HTML page. Init ...

Steps for importing a JavaScript file from Landkit into a Vue project

Currently, I am working on an interesting project and utilizing Vue with Landkit Bootstrap. However, I am encountering issues with the JavaScript behavior of the Landkit component. I usually import the following links in my index.html file, but in the new ...

How can we pass on the width from an image to its parent or grandparent element using CSS?

Creating a cohesive image gallery with captioned images of different aspect ratios is my goal. To maintain consistency, I desire the browser to display each image at the same height while preserving its original aspect ratio by adjusting the width accordin ...

Difficulty arises when attempting to create JSON using the Array.push() function from the data received via Ajax. The generated JSON is not successfully populating the tbody element

I am facing an issue while populating my tbody with data using the code below: function adaptSelectedBanks(banks) { console.log(banks.length); $(function() { banks.forEach(function (ba) { var c ...

The styles in the CSS file are not behaving as expected

Having an issue with my CSS file for the Header.js module. Despite writing rules, only one style is applying. Can anyone help me identify the problem? Thanks in advance! Header.js component import React from 'react'; import '../../../asset/ ...

When the ID and anchor link within a URL fail to scroll to the specified anchor location

I'm trying to add an id to a URL and scroll to an anchor link <a name="tags" id='tags'></a> <a href="edit.php?id=382#tags">GO</a> I have also attempted the following: <a href="edit.php?id=382&#tags">GO& ...

Guide to highlighting rows in v-data-table with a click in Vuetify (version >= 2.0)

In my email management system, I utilize a v-data-table to organize emails. When a user clicks on a row, a popup displaying the email details appears. Desired Feature: I am looking to have the rows marked as "readed" (either bold or not bold) after th ...

Center text within a span element

I'm struggling to set up arrow navigation with both next and previous buttons that need to function in Internet Explorer 7 and newer versions. For the next button, I want the background image to appear to the right of the text. As for the previous bu ...

Interactive JavaScript Slider for Customizing Selection

Recently, I came across a range slider and I am trying to make it more dynamic. The current JavaScript code has hardcoded references to specific HTML elements, and I want to have multiple sliders on my HTML page, each functioning independently. The code sn ...

What is the best way to transfer a segment of CSS, HTML, and JavaScript code from one static template to another?

I have a collection of static files (html, css, and js) and I've identified a specific piece of code (let's say a dinosaur animation) that I want to move to another set of static files (a separate project I'm working on with a different temp ...