Local CSS not used in Local HTML Webview
Hello! I created a simple html file using the kitchen sink example.
The local stylesheet is not recognized. I can change it to a hosted url, e.g. http://www.fred.com/file.css and it works. But the local file does not.
Perhaps I'm confused about what is the current directory for my html file?
I have tried relative path, absolute path, etc.
Thanks!
<html>
<head>
<title>Sample HTML</title>
<link rel="stylesheet" href="main/home/iphone.07.css" type="text/css" />
</head>
<body>
3 Answers
-
you must reference the CSS relative to the directory of the HTML file, so if index.html is in Resources/html/index.html and style.css is in Resources/css/style.css, you must include it via the path ../css/style.css in index.html.
-
Beware of how you store ur index.html locally,
Normally the file you put into Rescources folder will goto Titanium.Filesystem.resourcesDirectory E.G.:
Applicatons/4Q3YYASGDA-4QHY-Q43H-Q3HAGB-Q3H/Documents/
While if you save the file using the kitchen sink example, you most likely will use Titanium.Filesystem.applicationDataDirectory E.G.
Applicatons/4Q3YYASGDA-4QHY-Q43H-Q3HAGB-Q3H/My App Name.app/
So you either use relative path to your File.html..go back one folder and towards ur app name folder or use the absulote path like below example or simply save all your files to same directory.Use absoute path
var f = Titanium.Filesystem.getFile( Titanium.Filesystem.applicationDataDirectory,'Myfile.html');myHtml =…. link type='text/css' rel='stylesheet'
href='//'+Titanium.Filesystem.resourcesDirectory+'/style.css" …..or 'Put in same directory'
f.write(myHtml)…….
var f = Titanium.Filesystem.getFile( Titanium.Filesystem.resourcesDirectory,'Myfile.html');myHtml = ….link type='text/css' rel='stylesheet' href='style.css'….
f.write(myHtml)…….
-
In local files instead of this code that works only on iOS
<link rel="stylesheet" href="relative-path.css" type="text/css" />You can use this one that also works on android:
<style> @import url(relative-path.css); </style>