My biggest problem here is to express what I want, so please free to alter the formulation / suggestion correct wording for things.
On mobile I wish my page to be only vertically scrollable (page width and view port width are the same. A bug is causing an element adding more width than it should. I have identified the culprit element, when I set this element style to "display:none;" the display is correct (no horizontal scroll), when I don't I get an horizontal scroll.
To make it clear, with ".culpritElement {display: none}":
With culpritElement visible:
culpritElement is generated with some inline style by a third party library that I don't want to tweak. Is there a CSS directive to set to make the element visible but out of the positioning flow of the others (and page size computing).
You could set .culpritElement { max-width: 100vw; overflow-x: hidden; }
Or you could apply the above css style to its parent element
Related
Hi I have a responsive website. All the DIVs container depend of their parents and I use a lot width and height 100%.
I see that Arjs is setting fixed dimensions to the body.
I thought that I did something wrong but in the official example is happening the same:
My goal is to have some html elements on front of the camera but the fixed dimensions are affecting my CSS. Is there a way to control this?
I tried this configuration for tests but I did not see any change:
arjs="sourceWidth:480; sourceHeight:480; displayWidth: 480; displayHeight: 480"
You should use the "embedded" component on the tag, it will remove the automatic css fullscreen styles that A-Frame adds by default. You can find more details here in the documentation.
I have fixed it using position "fixed" in all my elements.
Making position "fixed" in all elements is helpful but not enough.
And still making custom elements acting weird or overflow from the screen.
Simply add these may help:
html {
width: 100vw;
height: 100%;
overflow: hidden;
}
My problem is when popover comes out it always stay inside of scroll. So that when I need to see popover content I need to scroll down then I can see it. I use z index. But I can not show the popover out side of scroll. I am using angular popover.
If I use position fixed instead of absolute it always open aspect of window and I don't want it.
This is an aspect of how CSS works. You are using incompatible CSS techniques. A child element (popover) that is absolutely positioned cannot be rendered outside a parent element boundary with overflow restrictions (hidden or scroll). The overflow property tells the browser to enforce rendering restrictions on all child elements except ones with "fixed" position.
If you show your code, we can probably help you achieve your goal with some modifications.
Edit
With the example provided, all that needs to be done is to add a CSS rule to the .sectionone element for position: static
.sectionOne {
position: static; // solution
overflow-x: scroll; // in example provided
}
.table {
width:1000px; // in example provided
}
Not sure how to best ask my question. And I can't yet post screenshots. :( This issue does happen in mere current coding practices. You can currently even see this issue happening on Facebooks home page.
Here's my URL:
www.alpacanation.com
How to replicate live
Grab the right hand side of your browser and pull inwards. Eventually a scroll bar appears. Not necessarily bad. As I have a fixed with here. However… Notice the scrollbar is the length of the background color up in the top of my header which is actually creating a "Curtain" like effect.
Make matters worse:
If on other high level parent elements like .Footer or .Page you play around with overflow and position relative the curtain will then begin overlaying on top of the entire site.
Check out Facebook: They often have this issue as well. Obviously most don't notice it as it's not going over top of the content.
In either case I know there is something not right.
Help appreciated!
Add something like this to your CSS:
body { min-width: 980px; }
You have min-width: 980px; set in many of the elements on your page, but not on html, body, or .container. Once the viewport is smaller than this, these elements will overflow html and give you the scrollbars you're seeing.
But this doesn't make html any bigger. It--and its background--is still at the viewport size. This is why you get the "curtain" effect when you scroll.
Setting width: 100% on html doesn't fix this; this only sets html to 100% width of the browser window. If you're going to use min-width, make sure you you don't just apply it to elements that hold your content, but also those that have your backgrounds.
to fix this, add
html, body {
min-width: 980px
}
in your www.alpacanation.com/styles.css:40, then you are done. :)
EXPLANATION: the problem is this container,
<!— stat container —>
<div class=“container”>
<!— START FOOTER MENU SECTION —>
that container has width:980px which screws up the view because it forces that container to stay at 980px wide while the rest is shrinking, thus creates the ‘curtain’ like effect.
I have done some testing and from what I can see there is a bug in mobile Safari on ios6.
When adding overflow:hidden on the body tag and moving an element out of the body using transform:translateX(100%); It creates an extra scrollable space for that element.
On all desktop browsers it is "hidden".
Here is a demo: http://jsfiddle.net/mUB5d/1 . Open that in Mobile safari and you will see what is wrong.
Could anyone take a look at safari 6 on Mac OS to see if the bug is present there too?
Does anybody know of any workaround besides creating another parent around my element?
Thanks for your feedback!
Nope. Safari 6 on Mac does not present with the bug. Scrollbars are not present.
I ran it on OSX Mountain Lion (10.8.2)
To further answer your question, the reason this is happening probably has more to do with Mobile Safari's zoom rendering than an overflow hidden bug. The element is in fact being hidden off screen (notice below where I have scrolled over to the right all the way, it still doesn't show me the full 100% width element - 90% of it is in fact being hidden.
It likely has something to do with iframes, and page zoom. Still looks like a bug though.
I'm assuming you're demonstrating in JSFiddle from a real life example. If you go back to your real life example (apart from iframe territory), try adding this meta tag to the head if you don't already have it, and see it this helps:
<meta name="viewport" content="width=device-width, initial-scale=1">
This is normal behaviour on iOS (and iOS only). You can work around it by declaring overflow: hidden on both html and body element. In addition, you should set the body to position: relative.
Overflow behaviour
There are several things at play here. To understand why the fix works, we first need to have a look at how the overflow of the viewport is set.
The overflow of the viewport is determined by the overflow setting of the html element.
But as long as you leave the overflow of the html element at its default (visible), the overflow setting of the body gets applied to the viewport, too. Ie, you can set either html or body to overflow: hidden when you target the viewport. The overflow behaviour of the body element itself is unaffected - so far.
Now, if you set the overflow of the htmlelement to anything other than visible, the transfer from body to viewport does no longer happen. In your particular case, if you set both overflows to hidden, the setting of the html element gets applied to the viewport, and the body element hides its overflow as well.
That's actually the case in every reasonably modern browser out there, and not specific to iOS.
iOS quirks
Now, iOS ignores overflow: hidden on the viewport. The browser reserves the right to show the content as a whole, no matter what you declare in the CSS. This is intentional and not a bug, and continues to be the case in iOS 7 and 8. There is nothing anyone can do about it, either - it can't be turned off.
But you can work around it by making the body element itself, not the viewport, hide its overflow. To make it happen, you must first set the overflow of the html element to anything other than visible, e.g. to auto or hidden (in iOS, there is no difference between the two). That way, the body overflow setting doesn't get transferred to the viewport and actually sticks to the body element when you set it to overflow: hidden.
With that in place, most content is hidden. But there still is an exception: elements which are positioned absolutely. Their ultimate offset parent is the viewport, not the body. If they are positioned somewhere off screen, to the right or to the bottom, you can still scroll to them. To guard against that, you can simply set the body element to position: relative, which makes it the offset parent of positioned content and prevents those elements from breaking out of the body box.
Answering in code
There is one final gotcha to watch out for: the body itself must not be larger than the viewport.
So the body needs to be set to 100% of the viewport width and height. (The credit for a CSS-only way to achieve it goes to this SO answer.) Margins on the html and body elements have to be 0, and the html must not have padding or a border, either.
Finally, in order to deal with body padding, and in case you ever want to set a border on the body, make the math work with box-sizing: border-box for the body.
So here goes.
html {
overflow: hidden;
height: 100%;
margin: 0;
padding: 0;
border: none;
}
body {
overflow: hidden;
position: relative;
box-sizing: border-box;
margin: 0;
height: 100%;
}
NB You can set body padding and border as you please.
After struggling with this for a while I've found that both html and body tags need overflow hidden to actually hide the overflowing contents. On elements inside body overflow hidden works fine, so our choice is an extra css rule or a wrapper element.
for me it works
I have implemented in the left side menu
if($('.left-menu-panel').is(':visible')) {$("body").addClass('left-menu-open');$("html").css('overflow-y','hidden'); $('body').click(function() {$("body").removeClass("left-menu-open") ;$("html").css('overflow-y','visible'); });$('#off-canvas-left').click(function(event){event.stopPropagation();}); }
I have a website at filmblurb.org.
The page-container of my site extends to the bottom of the window when you scroll out to make for a 100% CSS layout style, but for some reason even when the height is 100% for both the body and tag, those two elements go about halfway down the page and then stop when the viewport is zoomed out. When I'm profiling those elements in Google Inspect Element that is. My page-container is currently min-height: 100%, but that for some reason actually does extend to the bottom of the viewport when zoomed out.
I've also taken screenshots of what I'm seeing to give you a better idea. Here they are [link]i917.photobucket.com/albums/ad16/jtarr523/… (for the body) and
(for the HTML)...Both are not extending to the bottom.
Anybody know how to fix this?
I would appreciate it.
min-height: 100% on the html element means that that element will be at least as tall as the viewport. It does not mean that it will always extend to the bottom. If you scroll down, then you may still be able to scroll below the bottom of the <html> element.
The only way to prevent this (short of JavaScript) is to ensure that all elements on the page (that is, everything that could possibly cause a scrollbar) is kept within the html element. A simple way to force this is to put overflow: hidden on your html element:
body {
overflow: hidden;
}
If the problem is being caused by a float, then that will solve it. If the problem is caused by an absolute-positioned element or a negative bottom margin on the last element, then that will replace your problem with a more serious one: the page will be cut off at the bottom of the html element. You will then have to find the problem element some other way.
(The same applies to the body element; it will need its own overflow: hidden; to ensure that nothing can extend beyond it.)
Not sure exactly if it would work with browser zoom, but in my experience (and according to this question) you need to set the html tag height to 100% if you are setting container elements to min-height: 100%.
html { height: 100%; }
body { min-height: 100%; }
Replace body with a reference to your main container and it should still work. As far as I can tell there are no adverse reactions to setting html to 100%; it doesn't cut the page off or mess up any other styles.
Like I said, I'm not 100% sure this is related to your problem, but it's probably worth a shot.