I have given a small amount (-7px) negative margin to a div to align the text with an image next to it.
The divs have some different sizes according to a few media queries. Everything works fine except in the largest size which, for some reason, adds a small scrollbar and the negative margin is suddenly clipped.
I have no idea why this is happening?
Even adding height to the parent doesn't help and the scrollbar still appears for some reason?
For the life of me I can't recreate it in jsbin either, so I'm wondering if anyone had any tips on what could be causing the sudden appearance of a scrollbar/clipping?
EDIT
Apologies for the delay, took a while to strip out all the extraneous content but here is a working test that demonstrates the issue.
If you 'zoom out' or make the window very large, you can see the heading clipping suddenly. Forcing overflow: visible also does nothing. Definitely something odd is happening that is causing the scrollbar to suddenly appear too.
Here is a video that demonstrates the issue. My browser is zoomed out to 75% to simulate a larger screen. I am using Chrome 30.0.1599.22 on Mountain Lion.
To answer your question:
what could be causing the sudden appearance of a scrollbar/clipping?
It's caused by this CSS:
body.catalog-product-view .col-center {
overflow-x: hidden;
width: 1800px !important;
}
And to be exact, it's caused by overflow-x: hidden;
According to this answer, W3C spec says:
The computed values of ‘overflow-x’ and ‘overflow-y’ are the same as
their specified values, except that some combinations with ‘visible’
are not possible: if one is specified as ‘visible’ and the other is
‘scroll’ or ‘auto’, then ‘visible’ is set to ‘auto’.
Here are possible solutions: CSS overflow-x hidden and overflow-y visible
However, they didn't seem to work when I tried them with your code.
Some example html/css would help us answer your question, but if the scrollbar is causing the negative margin to be clipped, why not just hide the overflow on the div to prevent the scrollbar from rendering?
div
{
overflow-y:hidden;
}
waffl.
SO, here is the root of your bug =)
#media (min-width: 2088px)
body.catalog-product-view .col-center {
overflow-x: hidden; /* this makes scroll visible and the text being cutted */
}
Try this in CSS:
body { max-width: 200%;
}
div { width: 170%; }
If you define the width in percent values everything will be adjustable.
Related
I have these TWO websites which I just realised both have this issue, and it lies with the navbar. When on mobile device size they get these annoying scrollable white borders on just the right side.... changing padding and margin of anything doesn't help at all. But changing position: fixed; to relative fixes it but obviously makes the navbar not stick. So for some reason the z axis layer of the document is getting a bigger overall width than the body or normal y and x axis divs.....?
Site 1: http://myleisure.com.au
Site 2: http://danceforovariancancer.com.au
I'm not sure about your navbar being the problem. I can't reproduce it on my phone to know for sure, but I did test it on OSX Chrome at 320px wide.
I went into the dev tools and either deleted elements or manually added overflow: hidden; to find out where it made a difference. From what I saw, various minor problems are hidden throughout the sites that are causing overflow (and thus, scrollbars).
On the first site, this particular rule seems to be the actual culprit...
In "css.css":
.col-centered {
...
margin-right: -4px;
}
On the second site, you have nested .rows. A .container has 15px of padding to offset child .row's -15px margins. But .rows do not have the same padding, so they cannot be nested.
Your nesting problem appears at the "BONUS EVENT" heading within the
Acts section.
Also, add the img-responsive class to the image of Jane Hill's
signature in the About section.
Finally, at 320px width, the email provided in the footer is too long
to fit. I would recommend that you change the paragraph wording and swap it out for a mailto link like:
Emma Robinson
Try this:
html, body {width:100%; overflow-x:hidden;}
I'm trying to center an absolute div and at the same time also set the width of this div, but apparently only one these two things is possible at the same time. I've managed to center the absolute div rather painlessly, but setting a min-width adds this useless horizontal scrollbar for no reason: https://jsfiddle.net/pietertje1/ze7472ge/
The weird thing is, if I stretch the div to its desired width by adding in a single line of characters, it behaves perfectly.
anyone any idea how to fix this?
It looks like your min-width rule is causing this. Expand your fiddle output window and you'll see it go away. If you need that min-width you can target elements and apply overflow rules to them. For example
body {
overflow-x: hidden;
}
JSFiddle Link - your example with this rule
Edit
Per discussion, if you simply wish to center an element, apply the following margin rule
margin : 0 auto;
Updated JSFiddle
After applying this: (to fix extra space on the right):
html {
width: auto !important;
overflow-x: hidden !important;
}
body {
width: auto !important;
overflow-x: hidden !important;
}
the vertical is no longer smooth, and sometime is stuck with the addressbar (for mobile devices).
is there a way to fix the vertical scroll?
im using bootstrap 3.1
Thanks.
Please check height definitions if there are any. Usually that's what causes a sticky vertical scroll in my experience.
Also, "extra space to the right" means you have defined widths "width:300px;" instead of percentages that are causing overflow, you should address these instead of trying to play around with the html/body.
Try inspecting elements until you find which element is causing your page to overflow, and change it's width to fit on a mobile screen, or convert it to a percentage of the total width of the screen so that it scales nicely.
If you give us more code, maybe even a website link we can give you a better answer, but you should never have to hide overflow, use auto width or overuse !important tags like that on the html/body.
I am getting an unexpected (to me) behaviour where a vertical scroll bar is showing up. I do not understand what the constraint on the height of the container might be.
I am able to make this problem go away by either changing the LI's margin:1 or set
the UL's lineheight: normal instead of 1.
Can anyone explain what is actually occurring? That is to say what height have I exceeded that requires a vertical scrollbar?
I created a very simple JSFIDDLE to illustrate the issue I am having.
body {
line-height: 1;
}
ul {
margin: 0;
}
.content-section {
overflow-y: auto;
}
<div class="content-section">
<ul>
<li>cheese</li>
<li>crackers</li>
</ul>
</div>
This is because your line-height is set to 1, which means the line-height is the same as the font-size. This causes the font to slightly overflow the line. You need to set line-height to a value greater than the height of the text, as you may have guessed. The text is technically behaving as it should. The height of the box is defined by the height of the lines, but the text is ever so slightly larger than the lines. Your line-height should never be equal to your font-size from a readability standpoint. I hope this helps. I know it doesn't exactly tell you where the height is coming from, but I believe you have successfully explored multiple means of combating it.
I am not sure why you need the overflow to set to auto, if you remove it then problem solved
If the content-section need to be a certain height, then set the height and the scroll bar will appear if it needs to be (if you need the overflow)
http://jsfiddle.net/pGuHG/2/
.content-section {
overflow-y: auto;
height: 100px;
}
I also had this problem. I have a scene when need set max-height and need scroll when cross the height, so I need to set overflow:auto, but when not cross the height, the scroll also show up.
I adjusted line-height to be larger and the scroll disappeared.
These three SO questions didn't quite get me what I needed, interesting though the BFC layout stuff was. (One, Two, Three)
This fiddle shows the issue I'm having, only in Chrome is the hidden content still enforcing width dimensions of the div classed 'content' with a width value of 0px.
This layout is the basis for an Accordion style menu... which obviously isn't going to work if the enforced content dimensions are visible :P
Why is Chrome behaving this way, maybe I missed something in the BFC explanation? A solution would be awesome.
What a nasty bug!
Need to research if further, but if you know the original width of .content, then you can add the same negative margin to it: http://jsfiddle.net/kizu/cpA3V/7/ — so it would compensate the original width. And if you'll need to animate the accordion, you'll just need to animate the margin alongside the width.
Try with this
.slide {
float:left;
width:25px; /* width added here (same width of '.handle' ) */
}
Example : JSfiddle
If you give the .content a width of 1px, then it behaves correctly. I can't explain what's happening but you can solve this by using display: none instead of the width.