What is preventing me from setting the maxwidth in Android WebView during onLayout?

I am attempting to customize the onLayout function of a WebView in order to limit the size of large images to fit within the screen size. Within my extended WebView, I have tried the following code:

@Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        Log.d("WEBVIEW-WIDTH",""+getWidth());
        post(new Runnable() {

            @Override
            public void run() {
                loadUrl("javascript:var imgs = document.getElementsByTagName('img');"+
                         "for (var i=0; i<imgs.length; i++) {imgs[i].style.maxwidth='"+getWidth()+"'};");
            }
        });

    }

Despite logging the new width when rotated, the image width is not being restricted as intended.

Answer №1

The reason for the issue was my use of maxwidth instead of maxWidth.

Luckily, I discovered a more effective way to showcase it that adjusts the image size during zooming and rotating:

 img { max-width: 100%; }

Source: http://davidwalsh.name/image-max-width

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 steps can be taken to seek assistance for a specific function within a module while using the REPL in node.js?

Seeking Documentation in the form of Man pages for a function within a module in node.js using REPL. When using Console.dir(modObj), all the methods and properties associated with a module are listed. However, I am unable to locate any manual or help docu ...

Is it possible to asynchronously access a JSON object that has been retrieved from a local file on a global scale using the XMLHttpRequest method and

Having some trouble manipulating data from a local JSON file using this technique (no jQuery) as I can't seem to access the object on a global scale: var actual_JSON; function loadJSON(callback) { var xobj = new XMLHttpRequest(); xobj.o ...

Issue with React-select: custom Control prevents select components from rendering

Implementing react-select@next and referring to the guide here for custom Control components is not yielding the desired outcome. import TextField from "@material-ui/core/TextField"; import Select from "react-select"; const InputComponent = (props) => ...

Is it possible to terminate an active server process triggered by an HTTP post request in Node.js prior to returning a response?

I developed an application where I utilized Ajax to make calls to a Node server. The issue is that even if the user navigates to another page, the server persists in processing the initial request made by the Ajax call. It then proceeds to process the new ...

Resolving a duplicate class exception with Javassist

Currently, I am using Javassist to insert a line of code into a method's body. This involves a simple modification for adjusting the text color of a label inside the intellij-IDE. However, when attempting to make this modification, I encounter the fol ...

Encountering issues with installing @vue/cli on Linux Ubuntu

Currently facing an issue while attempting to install the Vue CLI on Ubuntu (WSL). After running both yarn add global @vue/cli and npm install @vue/cli --global, it seems like the commands were successful. However, upon checking the version using vue --v ...

Failed to instantiate: NullPointer Exception occurred

After encountering numerous issues, I have finally narrowed it down to one persistent error that occurs when attempting to open the application. Despite trying various solutions for NullPointerExceptions, none of them seem to resolve the issue. Below is a ...

utilize images stored locally instead of fetching them from a URL path in a Vue.js project

Hey there fellow Developers who are working on Vuejs! I'm encountering something strange in the app I'm building. I am attempting to modify the path of image requests based on a particular result, which causes the images to change according to th ...

When I attempt to run 'ionic cordova build android --prod', I am receiving the following warnings

''' Configure project :app WARNING: The onesignal-gradle-plugin MUST be before com.android.application! Please put onesignal-gradle-plugin first OR update to com.android.tools.build:gradle:3.0.0 or newer! WARNING: Configuration 'compile ...

How can I acquire a duplicate of a Webgl texture?

I have a webgl texture and I have stored it in a JavaScript variable var texture1 = CreateTexture() function CreateTexture(){ var texture = gl.createTexture() // more WebGL texture creation code here return texture } I am looking to create a copy o ...

Having trouble with Next.js environment variables not being recognized in an axios patch request

Struggling with passing environment variables in Axios patch request const axios = require("axios"); export const handleSubmit = async (formValue, uniquePageName) => { await axios .patch(process.env.INTERNAL_RETAILER_CONFIG_UPDATE, formVal ...

Dealing with registration issues on the Android platform while using PHP and MySQL

I am currently developing a straightforward registration form for Android to create new users and securely store the data in a MySQL database using PHP. While the application functions correctly, there is an issue where although the system successfully in ...

Next.js - utilizing dynamic API routes within nested folders

Currently, I am working on developing a basic API that reads a local JSON file. My goal is to create a dynamic API that can adjust based on the specific calls it receives. Within my API folder structure, I have: api --book ---[id].js ----content -----[id ...

The issue with JQGrid: Inaccurate selection of drop down value when edit type is set to 'select'

I am currently using JQGrid 4.4.4 and have encountered an issue with a column set to edittype = 'select'. While the value displayed in the grid row is correct, the drop-down or combo-box value is being set to the wrong value when editing the row. ...

The Battle of node.js Modules: Comparing socket.io and express.static

The server.js file I am currently running is set up as follows: module.exports = server; var express = require('express'); var fs = require('fs'); var server = express.createServer(); var port = 58000; server.listen(port); var ...

Attempt running four threads simultaneously within a single method

I attempted to execute the following code on 4 parallel threads, but unfortunately, it did not work as expected. I am unsure if it is even possible to achieve this. Take a look at the code snippet below: List<MyObject> head = a.subList(0, 2000); ...

Preventing users from selecting both future and current dates in a Bootstrap datepicker: A Step-by-Step Guide

Issue Description: I am working on a project using React JS and have implemented the bootstrap datepicker. I have set the input type to "date" for the date of birth field, but I need to restrict users from selecting current or future dates. How can I achie ...

Utilizing Bootstrap Modal to trigger an Action Result function when a button is clicked

I could use some assistance. In my current setup, I have a file picker that loads a file into a specific table in my database. When the user clicks a button, a bootstrap modal pops up to ask if they are uploading more files. This is how it looks in my vi ...

Guide on automatically navigating pages using HTML

My dilemma involves two HTML pages: flash.html main.html I am seeking a solution where the flash.html page is loaded first for 5 seconds, after which the main.html page should automatically load. How can I achieve this? I attempted to use setTimeout(fu ...

Here is a step-by-step guide on how to use JavaScript to eliminate the page title, URL, date and

When printing a page using window.print, is there a way to exclude the page title, URL, page number, and date/time from appearing? ...