After rotating my blackberry device (Torch 9860) from landscape to portrait, the height doesn't update. Printing the value of window.innerHeight shows that the value doesnt change. sometimes when I reload the app in portrait mode it has the correct height, rotating to landscape works correct.
In the head I defined the viewport like this:
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0">
In CSS I defined:
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
I also tried to set the height (and width) myself in the window.onorientationchange listener to screen.height, but this value is larger than the viewport (about 1.5 times).
What am I doing wrong? What can I do so the body always has the screen size?
I'm actually looking for a solution to a similar issue: I’m trying to display an element of 100% of the visual viewport height. My problem is that my viewport height takes into account the address bar (so 100% is 100% but minus the scrollbar height), which I don’t want (since if the user scrolls, the address bar will not be visible, and therefore my element will be too small).
For your problem, I think you just need to remove "height=device-height" from your viewport meta tag like I dind, since BB devices seem to not compute again this value on orientation change (which looks like a bug to me).
Sorry for my English!
Related
I already looked at the solutions under scale fit mobile web content using viewport meta tag but didn't have any luck with the samples provided.
My problem is that I have 940px wide web page which needs scaling up or down depending on the device viewport width. I'm using Phonegap to port web pages into an Android app.
If my viewport is over 940px, like on my 1200px wide phone, then the code below works fine. The viewport zooms just the right amount so that page fills the display:
var mvp = document.getElementById('view');
var ratio= screen.width / 940
mvp.setAttribute('content', 'width=device-width, initial-scale='+ ratio +', target-densitydpi=device-dpi')
However, if I have a low resolution tablet with a width lower than 940, the page is too big to fit, and needs moving around in order to see the off-screen parts. Based on discussion in the aforementioned thread, I tried the following, but no combination of viewport settings will force it to scale to 940, so that the view port can "zoom out" to the right size:
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + screen.width)};
or
if (screen.width < 940) {mvp.setAttribute('content', 'initial-scale=1.0, maximum-scale=1, minimum-scale=1.0, user-scalable=yes, width=' + 940)};
do not work. In fact, setting viewport width to any value manually just doesn't have any effect at all.
What I am I doing wrong? I just want the viewport width to zoom out so the whole width of the 940px page shows correctly. There must be a combination of viewport settings that will do this for me. I'd appreciate help.
The width value of the viewport meta tag sets only the layout width or "initial containing block" width. i.e. If you give the <html> element a style of width: 100%, the width it will end up in pixels is what you set in the viewport meta tag.
If your page is really 940 px (because, for example, you give your html an explicit width: style="width: 940px"), then width in the viewport tag wont have any effect (well, depends on which browser and other quirks - so setting it to 940 is a good idea).
So it's just a matter of making sure the page loads fully zoomed out. Browsers won't let you zoom out further than the content width of your page so you don't need a special case for larger screens. Chrome should load the page fully zoomed out. Firefox and Safari, as far as I can tell, usually load the page so that the width= attribute you set in the viewport tag fits in the device screen (hence my caveat above). So you really don't have to do much with the viewport meta tag:
<meta name="viewport" content="width=940">
Should do the trick, for both larger and smaller screens -- assuming your content is actually 940px wide. If that doesn't work, chances are your content has some size dependency on the viewport size or you have an extra wide element somewhere - a link or example to the content might be helpful.
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
So, I tried to add min-width because it will help to get rid of empty space. But I can't put min-width on full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
full.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
body{
overflow-x:hidden;
}
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
So if you are building liquid elements inside a div you would do it like this:
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
Often times it's a matter of a single element which can cause the page to get the horizontal scrollbar. That can be a pain, but you can easily find out the offending element by this simple css trick
* {border:1px solid red}
You can also add the following properties if the element is hidden.
opacity: 1 ; visibility: visible;
Demo :https://codepen.io/i_abhi/pen/eYzpBjr
2020
If any of you using Boostrap and came across this question then here's the answer.
for Bootstrap Users
Wrap your .row with .container or .container-fluid and it will solve the issue.
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
No more than three steps are required here:
Scroll the horizontal bar to the right where you can see the extra empty padding.
Open an Inspect Element
This is done by holding ctrl + shift then pressing i
Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
You can Use
#wrapper {
max-width:100%
width:100vw;
}
it work fine with me.
this is an old question and I know you found your answer
but I say this because I didn't see this anywhere else. maybe this help someone else.
if you use min-height in your CSS code, this causes a horizontal or maybe vertical useless scroll bar.
just delete it if it isn't important
So, I am designing with a fixed width. I just want the gutters to be flexible. So, I tried just using parent div's with 100% width. As you can see in this fiddle:
http://jsfiddle.net/P3Ckk/115/
What I intended was for what is happening with the fixed div ("nav" div) to happen. When the user window gets too small, I'd like the 100% width to collapse upon the fixed width elements (in this case, 1000px) and enable horizontal scrolling.
However, my parent width:100% does not work like that with relative positioning. The "top" "title" and "container" divs all stop at whereever the screen stops. I suppose that is 100% but it leaves the fixed width content overflowing these (now) smaller parent divs!
Additionally, the problem also shows up when a vertical scrollbar comes down. The area to the vertical scrollbar is considered 100% and the remaining gets left blank. This also creates a horizontal scrollbar to view this "extra" part.
What is the best solution here? Should I abandon my parent div 100% width approach?
I've tried making the these 100% divs have min-width:1000px, but that doesn't seem to work. I'm just a bit stumped here.
Any help appreciated. Thanks!
I've read about this before. Before you can use 100% in a div width you must set the css of both your body and html tags to 100%.
html,body{
width: 100%;
}
or else it will stop at the edge of the screen on any device.
This is my first question here.
I was trying to get an element vertically aligned inside a parent with fixed width and height. Inside the parent box there is also a header, that needs to be absolutely positioned in the bottom.
When working on it, checking cross browser issues I saw a difference on chrome. In FF, IE 8 & 9 it works as it should, if you open the sample in Chrome (19 right now) it gives a 1px gap to the parent as you may see.
Interactive example of the problem - CSSDeck
How I see it - 1px gap
I have tried removing white space, and quite a few things but I couldn't get to remove that gap...
Is this a bug? If you could help me remove the gap, or achieve the same result in a clean way that works cross browser (ie8+) it would be great.
See my example fiddle: http://jsfiddle.net/tnRem/
Basically I removed display: table from #outer and set height: 250px and box-sizing: border-box; (only for IE8+) to #inner.
I tried it with Chrome 19.0.1084.46, Fx12 and IE8
I'm trying to position a div inside a div.
the outer div has a fixed width and heigt, the inner div contains some text, has a fixed height and automatically fits to the width of the outer div (default behavior, without "width: 100%").
When I now add position:relative to the outer div and position:absolute + bottom: 0 to the inner div, I just want the inner div to move to the bottom of the outer div, but keep the same width it had before. This works fine in most browsers (Internet Explorer 8+, Firefox, Opera), but in IE7 it reduces the width to fit the text inside the inner div.
Is there a clean and valid way to prevent this different behaviour in IE7?
You can see an example here: http://www.loud.fm/tmp (I'm talking about the black box at the inner bottom of the featured-slider-box.) Thank you in advance! :)
Since your already using absolute positioning to lock it to the bottom why not add
left: 0;
right: 0;
to your CSS as well.
When you perform position: absolute, you are breaking some of the relationship. In the example you mention, you'll notice that div of the black box belongs to an li element in which the li element has a static width set (of 590px). You could dynamically set the width of the inner div to that of the outer by using javascript on load to handle all situations. Otherwise, set a static width size that matches that of the parent.
I had a pretty similar issue with Div's being changed in width by IE7. A simple style tag solved it for me:
min-width: 100%;
After hours of trial and error, this was all it took. Hope it helps!