When the Child dictates the width of a Parent which has overflow: auto, Firefox doesn't allow space for the added width of a scrollbar (15px) which leaves the Child getting cut off and an overflow-x to appear on the Parent.
What's the best way to fix this issue?
https://codepen.io/rhysyg03/pen/wrKQJG
.content {
position: absolute;
overflow-y: auto;
min-width:150px;
max-height: 300px;
padding: 8px;
background:white;
border:1px solid rgba(0,0,0,.12);
}
For example, adding padding-right: 15px fixes the issue but then leaves the other browser's with an extra 15px.
Or adding a fixed width to the Parent fixes issue but then you're bound to a fixed width restriction and I want to leave the Parent flexible.
Or adding overflow-x: hidden hides the scrollbar, but leaves the Child cut off.
Update: display: flex on Parent fixes the issue for regular widths (ie: an image) but not the widths set by text with whitespace: nowrap.
Thanks.
Firefox:
Chrome:
you can use #-moz-document to write some styles could be recognized by firefox only. see this: https://developer.mozilla.org/en-US/docs/Web/CSS/#document.
hopes helpful.
Related
I've run into what seems like a very specific bug in IE9 layout rendering, where the height of a div with box-sizing: border-box and a min-height is calculated incorrectly when the inner content is resized.
Given the following markup and CSS:
<div class="constrained">
<div class="content">Content</div>
</div>
* { box-sizing: border-box; }
.constrained {
border: 1px solid blue;
min-height: 300px;
padding: 10px;
overflow-x: auto;
}
The div.constrained renders appropriately at 300px height (278px inner height) when the page loads. When new content is injected into div.content via JavaScript, the div.constrained container grows to 322px height, as if the box-sizing were no longer applied.
JSFiddle demonstration:
http://jsfiddle.net/eafztwb2/16/
This only occurs with overflow values of auto, visible or scroll. Setting the overflow-x to hidden, or inherit (so long as inherit doesn't end up evaluating to one of the former) does not show the problem.
This isn't a question so much as knowledge-sharing, but I'd be interested in solutions that work around this while still allowing overflow-x: auto.
This definitely does look like a layout bug, but fortunately the work-around is pretty simple. Apply a height to your element, along with the min-height. For example:
.constrained {
height: 100%;
min-height: 300px;
}
The issue exists in Internet Explorer 10 as well. This solution works for both IE 9 and 10. Internet Explorer 11 appears to have resolved this on its own - I was unable to repro the issue there.
Fiddle: http://jsfiddle.net/eafztwb2/23/
When I set #wrap {height: 0; overflow: hidden}, the inner anchor tag should be hidden, thus click on the shadow area should have nothing happened.
I tested it on Firefox and IE. Both of them works fine.
But on Chrome, when I click on the shadow area, I still get alert window.
Is it a WebKit bug?
Here is the demo:
http://jsbin.com/ofuxar/3
<div id="wrap">
click
</div>
#wrap {
height: 0;
overflow: hidden;
position: absolute;
box-shadow: 0 10px 10px 10px black;
}
#wrap a {
display: block;
height: 100px;
}
You're setting the height to 0 but it's attributes are still displayed. Ergo, any styles you have applied to that element are still going to be shown. IF you did a 1px border, it would show a 1px with that border color. Probably the most known instance of the occurrence is when you have float elements inside of a parent div and the parent div collapses. All margin and border elements are retained, but the div has a height of 0.
As #Andrew stated in the comment, you should use display:none; to hide elements. If I may ask, what is your reasoning for setting something to height: 0?
EDIT http://jsfiddle.net/bHPFN/ As stated before, the attributes to the element cause it to NOT have a height of 0px, but instead extend the functional dimension of the element to what ever the CSS attributes delegate.
I have a div with lots of content in it, and trying to set a width to be 100% of the parent element. This div also uses a padding, so I thought I should be setting the width to auto.
But for some reason it always expands past the parent width. I even have overflow set to scroll.
What I want is the div to have a scroll bar (only horizontal), and its width to fit the parent width.
Does anyone know how I can fix this?
100% width of its parent, with padding:
Given that the padding you mention is applied to the 100% wide element, the problem is within the box model that browsers use. If you apply 100% width and some padding, the element will get width + padding as its complete width, thus causing it to become too large. There are a few ways to solve this:
CSS3 introduces a new property called box-sizing, by setting it to border-box, the padding will be added within the given width of the element, instead of adding to the width causing the element to become "to big". (Notice the lack of support by older browsers).
I believe it would be possible to use left: 0; right: 0; instead of using width: 100%;. In that case you can add padding, without the element becoming to wide.
The second option in practice:
<!-- The markup -->
<div class="parent">
<div class="child">Child</div>
</div>
/* The CSS */
.parent {
width: 200px;
height: 200px;
position: relative;
background-color: #666;
}
.child {
position: absolute;
left: 0;
right: 0;
padding: 10px;
background-color: #888;
}
Here is a working example of the second option: http://jsfiddle.net/mGLRD/
Horizontal scroll-bar:
To get a horizontal scroll-bar, you will have to look in to the overflow-x CSS-property. By setting it to scroll, you will see a disabled scrollbar when there is no content to scroll, so the scrollbar is always visible. Your other option is to set it to auto, where the scrollbar will become visible if needed (may vary between different browsers).
Try:
div#content {
width:auto;
padding:20px;
overflow-x:auto;
}
See my demo: http://jsfiddle.net/HRRsU/3/
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Everything is wrapped in a div with an id="main_wrap"
the main wrap has this style:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
}
Since everything is wrapped inside of this div, I don't understand why a horizontal scroll bar would appear at the bottom.
If any of the children have borders, padding (or sometimes margins) applied to them, that adds to the width and height. Using overflow: hidden; would avoid the scroll bars. But, if something has too much width, you probably want to find where it is coming from to avoid possible problems in the future.
Note that you may be able to use box-sizing: border-box to prevent borders and padding from adding additional width (or height). This is particularly useful when you are using something like width: 100%, but width: 100% also isn't necessary in most cases - elements with display: block applied will fill the width by default AND keep padding and borders from adding additional width.
For example:
html, body { margin: 0; padding: 0; }
div {
background: #111;
color: #eee;
padding: 1em; /* This doesn't add to width - still at 100% width */
border: 2px solid #5e5; /* This also doesn't add to width - still at 100% width */
}
<div>Test</div>
Try add overflow hidden:
#main_wrap{
margin:0 auto;
width:960px;
position:relative;
overflow: hidden;
}
That should work (but is hacky).
If the elements are side by side and have a combined width or , as BDawg says margins or paddings, that cause it to exceed 960px a scroll bar could appear. Post your entire code and we can figure it out very quickly. Hiding the overflow should work but it would not really explain why the scroll bar is appearing. Giving us your entire markup will help find the root of the problem.
Somewhere you've left any DOM elements unseen which occupies the extra width. it's better to find and fix the children than to use overflow:hidden . overflow:hidden will hide the scroll bar if user zooms in the page.
Working 100%
if you are using bootstrap it takes
margin-left & right 15px (or) -15px
you need to change 15px to 0px
Example
.main_wrap .row{
margin-left:0px;
margin-right:0px;
}
If you change width to 100% it helped you, but if you don't want, just try add external <div style="width:100%"></div> like this:
<div style="width:100%">
<div class="main_wrap">
%your content%
</div>
</div>
i'm using a empty div to display a line by setting height 3px. it works fine in all browsers but in ie6 the height div displayed with 20px height. It remains same even for height:0px . But changes in other properties reflects but not height and there is no duplicate css entry and inherited value from other div. Can any one help please
<div id="line"></div>
CSS:
#line {
border: none;
background-color: #134c7c;
height: 3px;
margin-bottom: 20px;
}
Internet Explorer has the odd idea that the content of every element should be at least one character high. You can get around this by using the overflow attribute, that way the content can remain a character high, but it doesn't affect the height of the element itself:
.line { height: 3px; overflow: hidden; }
Try:
line-height:0
Just a wild guess.
Inspect whether there is any space inside the element. If yes then set the
font-size: 1px;
property of the element.
try with space in the div or
Just guess