I got page looks like this
<html>
<head>
</head>
<body>
<div class='canvas'>
Some content here, table other divs and others
</div>
</html>
div.canvas {
margin: 0px auto;
padding: 0px;
width: 600px;
}
I need to fit "canvas" div to screen in android webView. Unfortunately I can't edit page on server.
Is there any other option instead of download html string, them edit it local and display it in webView ?
With css you can set the height to 100%, the issues is making sure your WebView is set to fill_parent as well, it won't work with a wrap_content setting
Related
Save this as an html file and load it up in Android Chrome:
<html>
<body style="overflow:hidden;transform: scale(0.5, 0.5);">
<video controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4">
</video>
</body>
</html>
It should look like this:
If you play around with it, you'll find that removing EITHER the overflow:hidden or the transform:scale will make the controls span the whole width of the video as expected. However the combination of these two styles makes any video controls incorrectly sized, as shown.
This question seems somewhat related and suggests adding a transform: translateZ(0) to the containing element, however adding that translation either to the existing transform on the body or onto a new containing div does not resolve the issue.
Is this a bug in Android Chrome? I don't understand why the conjunction of these two styles should affect video control width.
To change the width of the video player's native controls bar you can add following in the css:
video::-webkit-media-controls-panel {
width: 100%;
}
Here is the good example of styling native controls. I hope this helps you.
you can change the tag to something like this
<video width="100%" height="100%" controls>
<source src="http://techslides.com/demos/sample-videos/small.mp4">
</video>
You are setting width and height in a non-standard way, though there may legitimately be a bug, but it seems you are setting the width of the video to be half of it's native width. I recommend you set your style to be:
body {
margin: 0;
overflow: hidden;
background-color: #000;
text-align: center;
}
video {
display: inline;
height: 100vh;
}
<!doctype html>
<html>
<head>
<title>Some Video</title>
</head>
<body>
<video src="https://www.w3schools.com/html/mov_bbb.mp4" controls></video>
</body>
</html>
A simple HTML page contains a div with overflow-y:auto inside of another div with overflow-y:auto. This page scrolls normally on touch devices with IOS Safari and Android Chrome browsers.
However, if I open the same page in a native Android v.4.0 to 4.3 browser and scroll the outer div, the inner div does not move synchronously with the remaining content and jumps to its place only after some delay.
The same happens if the internal div has overflow-x: auto.
Example page: http://jsbin.com/cojoluwo/1/
The code looks as follows:
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>test</title>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#content {
height: 100%;
overflow-y: auto;
}
#scroller{
height: 100px;
overflow-y: auto;
width: 200px;
border: 1px solid red;
}
</style>
</head>
<body class='sapUiBody'>
<div id='content'>
<div>
<p> some text
......
<p> some text
<div id=scroller>
<p>internal text
...........
<p>internal text
</div>
<p> some text
...........
<p> some text
</div>
</div>
</body>
</html>
Is it a bug? If yes, is there any workaround known?
there's no need for this:
#content {
height: 100%;
overflow-y: auto;
}
a scrollable div with a set overflow inside another scrollable div with a set overflow is not a good idea on mobile and since your css properties for #content are redundant and not useful, you can safely remove them and it will work
http://jsbin.com/cojoluwo/5
I'm developing an Android App with Cordova/Phonegap and it works fine! But I've got one problem. On most of the devices my logo at the top looks good and is displayed right:
But on some Android devices is the image deformed:
The Image has the size of 200px x 50px and this size is defined in the HTML img-attribute and in the CSS file, too.
Here is my HTML Code:
<meta name="viewport" content="width=device-width, initial-scale=1">
[...]
<div id="topLogo">
<center><img src="media/images/strikefm-logo-small-top.png" width="200" height="50" /></center>
</div>
Here is my CSS Code:
#topFixed #topLogo {
width:100%;
height:62px;
position:fixed;
top:0;
left:0;
z-index:1;
background-color:#ffffff;
}
#topFixed #topLogo img {
position:relative;
top:9px;
width:200px !important;
height:50px !important;
}
Does anyone knows a solution for this problem?
Thanks!
I have made very basic page, here is the HTML code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Page</title>
<style>
#Canvas {
width: 1400px;
background-color: #09F;
position: relative;
margin-left: auto;
margin-right: auto;
}
#SiteHeader {
width: 1200px;
background-color: #CCC;
height: 165px;
margin-right: auto;
margin-left: auto;
margin-top: 15px;
border: 5px solid #F0F;
}
</style>
</head>
<body>
<div id="Canvas">
<div id="SiteHeader"> Why does this not fit in the screen? </div>
</div>
</body>
</html>
Just a simple #Canvas div to hold the content, and then a #SiteHeader div with a border around it. Here is a link to it:
The problem: When this page is viewed in a browser such as IE 11 on my Windows 8 RT tablet, the page does not fit the screen. When I say fit I mean that it should appear zoomed out so that I can see the entire page. I have to scroll horizontally to see the entire page.
I tried to use <meta name="viewport" content="width=1400"/> which seems to work for Android but not IE in Windows 8 Metro app.
I want the full 1400px width to appear on the screen even if the resolution of the screen is not that wide. It just needs to load zoomed-out but for some reason this page doesn't. Please can anyone suggest why?
You need to use this way, so that whatever the page size is given, that won't be changed by the viewport.
<meta name="viewport" content="width=device-width, user-scalable=no">
But in this case, there will be scrollbars in the small devices. Try it out yourself.
Okay, I think I figured it out.
Although these other website do have wrapper divs which far exceed the width of most devices, the actual content is inside a div which is less than 1080px wide.
My Windows 8 tablet has a resolution of 1920x1200. So when I rotate to view in portrait mode (display width of 1200px), it appears as if the website has shrunk (or been zoomed out of) to fit, but its not. Its just the extra background detail in the wrapper div has been chopped off, but the content still fits in the portrait width of my device which is 1080px.
If my tablet had a lower native resolution say 1024x768, then even a 960px width website would get chopped off in portrait mode.
Finally, and maybe most importantly, any divs that provide a background must not have a width set that is not flexible. Basically, always set CSS attribute to max-width: 1200px; rather than width: 1200px. This means that on smaller screens it will collapse to the width of the inner content div.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 8 years ago.
Improve this question
Running into an issue mainly on iOS(surprise) My footer is a sticky footer, while it is working according to how a sticky footer works the problem is that content falls below the footer, mainly the image of the lady.
I've tried several workarounds from spanning the image into the background, combining it into the footer, different positioning and nothing seems to work. Maybe I'm overlooking something obvious here?
I replaced the original image. Move your browser vertically all the way in the fiddle and you will see the content fall below. Also I tried using position:fixed on .quote but that causes problems with the soft keyboard on iOS and Android.
FIDDLE: http://jsfiddle.net/6u5AJ/
.foot_c {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
overflow-y:hidden;
margin: auto;
}
.footer {
background: #3c78bc;
position: relative;
text-align: center;
padding: 8px 0 5px;
text-align: center;
color: #FFFFFF;
z-index: 3;
}
.footerbg {
background: url(images/bgfoot.png);
background-repeat: no-repeat;
background-size: 100%;
min-height: 90px;
position: relative;
z-index: 1;
}
<div class="bg">
<div class="container">
<div class="logo">
<img src="images/logo.png" alt="logo">
</div>
<div class="column">
<form id="myform" action="buttons.html" method="POST">
<input type="text" name="field1" placeholder="Enter your Zip"></input>
<input type="submit" value="Compare"></input>
</form>
</div>
<div class="quote">
<img src="images/quote_lady.png" alt="quote_lady">
</div>
</div>
<div class="foot_c">
<div class="footerbg">
</div>
<div class="footer">
<p>Your Guide to Auto Insurance Quotes!</p>
<div class="phone">
<img src="images/phone.png" alt="phone">
<h3><span>Call Now</span><strong>1-(999) 999-9999</strong></h3><br />
</div>
<br>Terms of Use | Privacy Policy
</div>
</div>
</div>
see if this helps,
For both version I change your HTML a little bit, remove the foot-bg, I didn`t understand why you had that, and merge your background options hex color with img url.
Check this fiddle to POSITION:RELATIVE
http://jsfiddle.net/luckmattos/6u5AJ/2/
Check this fiddle to POSITION:FIXED
http://jsfiddle.net/luckmattos/yXRS8/1/
On FIXED version I added a padding-bottom to the body make sure all content will appear:
padding-bottom:90px // = height of the footer
Let me kwnow!
The way I usually like to do this is by having the footer one of two children of a parent that has min-height:100 and position:relative. The first child of this is your content container and the second, obviously, is the footer. The content container is made to be 100% height of the parent and given a bottom padding large enough to keep it's content out of the footer which is absolutely positioned at the bottom of the parent.
Modified your example to show this. I didn't remove much of your CSS so it may not be clear where the changes are but basically the 'bg' div seemed to be your main container so I made that min-height: 100% (remembering to define 100% heights on all it's parents else it won't work) and then gave the 'container' div the 100% height and padding at the bottom big enough to show the footer.
Hope this is clear enough.
http://jsfiddle.net/jaredkhan/6u5AJ/3/