The WebView component is unable to display internally stored CSS files within the project

Looking to display HTML content with CSS styling stored in a file downloaded from a URL and saved within the "context.filesDir". The downloaded folder contains all the assets required by the CSS file. Despite passing the CSS file path to the webview, only plain HTML text is visible.

The path for the CSS file has been confirmed to exist, as seen in Device Explorer:

File(context.filesDir.path+"/v4/v4/c/", "mobil-app.css").path

In my HTML, I have created a <link> tag for the stylesheet href:

val html = "...<link rel=\"stylesheet\" type=\"text/css\" href=\"file:///data/user/0/<package-name>/files/v4/v4/c/mobil-app.css\"/>...

I then tried calling the webview object with the .loadWithBaseURL() method, but the CSS does not apply. Attempts include using:

loadDataWithBaseURL(null, html, "text/html; charset=utf-8", "UTF-8", null)

and

loadDataWithBaseURL("file:///data/data/<package-name>/files/v4/v4/c/.", html, "text/html; charset=utf-8", "UTF-8",null)

Yet, no changes are observed. Can anyone assist in identifying what may be missing here?

Answer №1

At long last, the problem has been resolved. It appears that the issue lied in the incorrect path I was passing when calling the loadDataWithBaseUrl method for the baseUrl. Once I identified this error, the HTML content displayed correctly with the associated CSS file styles.

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

Issue with transition effect not functioning properly when hovering in HTML and CSS

Is there a way to achieve a slow smooth transition when hovering over the .bg-gradient element and have the same effect when removing the cursor? Currently, the transition happens quickly on hover. .asc { height: 500px; background-position: 50%; ...

Arrange components within the form

Just started experimenting with this a few days ago. In my form, there is a text field and a button that I want to align side by side at the center of the form. .row { width: 100%; margin-bottom: 20px; display: flex; flex-wrap: wrap; } .col-6 { ...

Extracting Section Titles from INI using PHP

I've spent all night trying to perfect this code with no luck. I'm not even sure what to search for at this point. Here's the situation: I'm using PHP to parse .ini files into an HTML table. This is the code in my html file: <?php ...

Modify the active link color in a Bootstrap menu by adjusting the CSS

Hi, I'm experiencing an issue with my CSS Bootstrap menu. I am unable to change the active link color, meaning that when I click on a link and move my mouse pointer out of the area, the link background turns white. I would like it to remain transparen ...

Creating impenetrable div elements with JavaScript or jQuery

I'm currently working on creating solid blocks using DIVs positioned side by side both horizontally and vertically. I've successfully achieved this when the divs have equal heights. However, an issue arises when a div has larger dimensions; it en ...

How can you prevent a tag from firing in Google Tag Manager by identifying a particular script included in the HTML code

Seeking advice on modifying our Google Tag Manager container as I am a novice when it comes to GTM. Encountering an issue with IE8 on pages utilizing Fusion Charts resulting in a javascript error in gtm.js. Upon investigation, it appears to be related to a ...

Troubles with Angular elements not aligning correctly when using the "display: block" property

When using an angular element for a directive with "display: block", it may not automatically take up 100% of the width of the parent container. In order to ensure that it does, the width must be explicitly set to "100%" in the CSS. Despite setting "width: ...

Incorporating the FLEX property into my code has been a challenge as it is not functioning properly on iOS 7 and 8 devices. Does anyone have any tips or suggestions on how to

While utilizing FLEX in my code, I noticed that the output is not what I expected on iOS 7/8 devices. <div className="modal-row"> <div className="col1"> <span>{dict.YourServiceNumber}</span> </div> <div ...

Positioning an image on the left side of a div within a flex container using

Here is the code I have: .usp-bar { display: flex; flex-wrap: wrap; background-color: #005932; color: #fff; font-weight: 700; padding: 10px 0; margin-top: 0; ju ...

How to stop PHP code from running before it should in an HTML form script

I recently created a form where the PHP code is located directly underneath the HTML form code within the same file. The issue I am encountering is that when the user fails to fill out all required fields and submits the form, the page immediately displa ...

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

What is the best way to position two grid containers side by side?

I am new to using Material UI and Grid, and I'm encountering an issue with positioning two grid containers side by side. My goal is to have an image on the left within a Grid container, and a list of objects on the right. While I was successful in po ...

Navigating through the img src using JavaScript

Currently, I am working on a task that involves the following code snippet: <input type="file" id="uploadImage" name="image" /> <input type="submit" id="ImageName" name="submit" value="Submit"> My goal is to have the path of the selected imag ...

Send the image link as a parameter

I've been trying to pass an image link through two child components, but I'm having trouble. I added the link to the state and passed it down, but it doesn't work. Strangely, when I manually input the link in the child component, it works pe ...

"Vanishing act: The mystery of the disappearing Bootstrap dropdown

I am currently using Bootstrap 3 in conjunction with Ruby on Rails through the Rails Tutorial Sample App. Within my application, users have the ability to like, or "savor," microposts, referred to as "pops." My goal is to display Gravatar icons of users wh ...

Retrieving a single number from Jquery's offset function during scroll events

Seeking the Current Top Position of Web Page Elements In my web page, I have divs with a height of 100%, each containing different content. I am attempting to determine the top position of these divs to manipulate them accordingly. However, when I try to ...

import an external JavaScript file in an HTML document

Looking to load a .js file from a simple HTML file? If you have these files in the same folder: start.js var http = require('http'); var fs = require('fs'); http.createServer(function (req, response) { fs.readFile('index.htm ...

What is the method for establishing an interval, removing it, and then reinstating the interval with the identical ID?

I'm wanting something along these lines: Inter = setInterval(Function, 1000); clearInerval(Inter); Inter = setInterval(Function, 1000); I've tried something similar without success. It's hard to explain all the details in a tidy way. Can a ...

What is the best way to hide or show child elements within a tree structure using a toggle function

My HTML code needs to be updated to include a toggle span and JavaScript functionality. This will allow the child elements to be hidden and only displayed when the parent is clicked. I am a beginner with JavaScript and would appreciate any help in resolv ...

Guide to Crafting a Location Object

When attempting to create a new location and specify its latitude and longitude in Kotlin, you may encounter the following issue: var targetlocation = Location("") // The code snippet below does not function as expected targetlocation.setLatitude(55.55555 ...