Guide to creating an HTML table in Android webview that fits the entire screen dimensions

Looking for assistance with a puzzling issue.

Inside my Android app, there's a fragment containing a webview along with other elements. The webview showcases an HTML table that acts as a game board with 8x8 cells, resembling a Chess board.

The challenge lies in making the table occupy the screen entirely while maintaining a perfectly square shape (consistent width and height).

How can I achieve this task? Simply setting the width and height to 100% in the HTML doesn't result in a square table. Using fixed dimensions leads to non-responsive resizing across various screen sizes. Attempting to scale the table based on the webview's size using WebView.getWidth() isn't straightforward either because the webview's size is unknown until the page loads, and the page load depends on knowing the webview's size...


A few additional notes (although their relevance is unclear):

The fragment's layout gets inflated from a specified file in Fragment.onCreateView. Later, within Fragment.onActivityCreated, the Java code adds the webview to the fragment. The HTML content is also dynamically generated through Java code.

Answer №1

After much trial and error, I stumbled upon a unique way to tackle this issue:

  1. Instead of directly attempting to retrieve the webview's size, I opted to calculate the fragment's size and subtract the dimensions of other views in order to determine the available space for the webview.

  2. Interestingly, even in onResume, all measurements returned zero values. To address this, I implemented a delayed Handler that triggers half a second after onResume is called. Within this handler, I construct the HTML document required for display.

  3. To ensure compatibility with different screen orientations and devices, I set the size of the HTML document to be half the remaining space within the fragment (although the reason for halving it remains unclear).

Admittedly not the most elegant solution, but it successfully functions on both my phone and tablet in both landscape and portrait modes.

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

What is the method for assigning a class name to a child element within a parent element?

<custom-img class="decrease-item" img-src="images/minus-green.svg" @click="event => callDecreaseItem(event, itemId)" /> Here we have the code snippet where an image component is being referenced. <template&g ...

Tips for preloading HERE Map tiles for offline use

Currently, I am working on integrating offline navigation with HERE maps. In order to download the map of a specific country, I must use the following method: installMapPackages(List<Integer> packageIdList) I have been referring to the documentatio ...

Prevent the Bootstrap table from expanding to the entire screen width and causing unnecessary spacing within the cells

I am facing an issue with a table that expands to fill the screen when it exceeds 600px, causing extra spacing on the right of each cell. How can I prevent this automatic growth and eliminate the unwanted space so that the next column aligns with the end o ...

Make sure to validate a form when submitting from an external source rather than through an HTML

In my form, there are various input fields (some acting as inputs even if they're not). Each field is validated upon submission by angular validation and html attributes like required, ng-maxlength, minlength, etc. Now, we want to implement a keyboar ...

Challenges Arising from Using Two Inputs within One Label

I'm seeking a solution to link together a radio button and text input in a label that incorporates Bootstrap's button style. Visually, the following code achieves what I want: <form> <div class="btn-group" data-toggle="b ...

Some breakpoints in Android Studio debugger fail to halt execution on Galaxy S5 Lollipop devices

Since updating my Samsung Galaxy S5 SM-G900F to Lollipop (Android 5.0), I've noticed some unusual behavior: Not all breakpoints are being caught within Android Studio. Here is the environment description and my observations: Operating System: Wi ...

What is the best way to pass the ng-repeat value to the controller in AngularJS

On my webpage, I am trying to utilize ng-repeat with an array like the one below: var array = [{name: Bill, age: 12, number: 1}, {name: Tyrone, age: 11, number: 2}, {name: Sarah, age: 14, number: 3}]; I want to have a button that, when clicked, sends eit ...

Unhook, add at the beginning, and set requirements jQuery

There are two clickable div elements that can switch classes when clicked. If the first one contains "1", it will be given a class of "active". If the second one contains "2", it will have the class "active" while removing the class from the first one. &l ...

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

Using Bootstrap 4 beta for Form Validation

I'm struggling to grasp the concept of building validation forms. The bootstrap documentation includes a JS code snippet (referred to as starter code) like the one below: <script> // Example starter JavaScript for disabling form submissions if ...

HTML does not have full support for the Arabic language

I am currently working on a project that needs to be converted into Arabic. I am utilizing codeigniter. However, when I attempt to write Arabic in HTML, it displays as (?????) for Arabic characters. Below is my HTML code: <!DOCTYPE HTML PUBLIC "-//W3C ...

Removing options that are not selected from dropdown lists in an Angular 7 table

My current task involves exporting multiple tables to Excel. I have a component that is present in all other components and handles the exporting function. Each component contains a table with the id 'table' that needs to be exported. The issue ...

Obtain content from a div element using jQuery

Here is a snippet of HTML code that I am working with: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>Demo</title> </head> <body> <script src="jquery.js"></script> <scri ...

Issues with the animation of the navbar menu button are preventing it from functioning

I have been attempting to incorporate animation when the navbar-button is toggled on smaller screen sizes. Inspired by the design of .navbar-toggle.larr in this particular template, I tried to implement a similar effect. /* ANIMATED LEFT ARROW */ .navbar- ...

Developing a slideshow with PHP and JQuery

Attempting to create a simple manual slideshow where the user clicks "next" to advance to the next slide. I have over 50 images and want to display them in batches of 8. For example, the first batch of 8 will be shown initially, then the user can click "ne ...

Structuring React Router: Implementing function passing

I am relatively new to reactjs and I am curious if there is a simple way to display information from the same component on different routes. In the code snippet below, I have two functions that return divs containing text. However, rendering them directly ...

What is the best way to showcase data from an Excel spreadsheet on a website: JavaScript or PHP with MySQL?

I'm currently in the process of developing a website and I want to integrate data from an excel sheet into it. Here's the format of the excel sheet: Each row represents an 'item', with each column containing specific properties relate ...

Align two containers centrally using absolute positioning inside a division

I am looking for a way to centrally align two "boxes" within a div using CSS. These boxes are positioned absolutely. For reference, here is the JSFiddle link: http://jsfiddle.net/p4sA3/8/ Is there a method to achieve this alignment without specifying spe ...

Flexbox not rendering correctly on IE and Chrome browsers

Initially, I avoided using flexboxes because of concerns about older browser support. However, the alternative involved floats, margins, z-indexes, and resulted in a layout that was visually unattractive. Despite setting specific dimensions for the left-h ...

Tips for preventing the keyboard from blocking important buttons

Hey guys, I have a window that contains two text fields and two buttons. When I'm on the second text field, the keyboard ends up covering the buttons, making them inaccessible. To overcome this issue, I currently have to rotate my device sideways, whi ...