Issue
I have some html code and I load it to WebView. I need to set button width in percents (in order to not to depend on the screen resolution).
When I set button's width in percents I'm getting an error that page cannot be loaded
butf I set it in pixels everything is okay.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type='text/css'>
body{ position: relative; }
button { width: 50%; display: block; position: relative; }
</style>
</head>
<body style='text-align:justify;color:white;'>
Some text
<br/>
<button>Boo!</button>
</body>
</html>
Any thoughts?
EDIT:
The solution was found based on @Zak's advice, i.e., by calling the js function after the page was loaded, getting the screen width and setting it to the element.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language='javascript'> function SetWidth(){ d = document.getElementById('but'); d.style.width=screen.width/2; } </script>
<style type='text/css'> body{ position: relative; } button { display: block; position: relative; } </style>
</head>
<body style='text-align:justify;color:white;'>
Text<br/>
<button id='but' >Scary!</button>
<script> window.onload=SetWidth; </script>
</body>
</html>
Solution
I have done this with DIVs that I need to be exactly X percent of screen resolution. The way I accomplished this was using JQuery after the page has loaded, because JQuery can detect exact screen width, then you can do the math, and set a width to exactly X pixels.
$(document).ready(function() {
var = myWidth = screen.width;
myWidth = myWidth / 2;
$('#button').width(myWidth);
});
I havent checked that.. But the concept uis sound I assure you
Also: Make sure this code is at the BOTTOM of the page to ensure it is rendered AFTER the page elements have loaded.
Answered By - Zak
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.