In Safari, when a parent element has overflow-y set to auto, it treats overflow-x as scroll or visible when a child element has a position fixed. Is there a work around for this? Please see this jsFiddle
.flyout{
position: fixed;
//this doesnt display
}
.parent{
overflow-y: auto
}
The flyout element is not visible in safari, while it is still visible in chrome, and firefox
http://jsfiddle.net/magicdawn/vt1cweyx/10/
remove overflow related from wrapper
add height & overflow-y to a direct child
Since overflow-x: visible and overflow-y: scroll behaves strange in safari, so we split them to 2 elements.
the top wrapper .parent handles overflow-x: visible
inner element .menu handles overflow-y: scroll
Related
I have one requirement to show vertical scroll and textbox TextBox_Inline_Issue element should be inline on a DIV. I'm using overflow-y:scroll and display:inline both css properties on the DIV. I'm able to get the vertical scroll after certain height but when I remove disply:inline, Textbox element comes down in second line instead being there in same line.
I'have attached screen shot for the reference.
.header-section{
max-height: 133px;
/*display: inline;*/
overflow-y: scroll;
}
I have a div with the following css:
overflow: scroll;
However, it appears that there's a border being added by the browser (?) where the scrollbar should appear if it was visible (even if it is not visible). I have inspected the css within dev tools, and cannot find a reference to this styling. How do I hide this scrollbar styling?
Here's an example screenshot - the red arrow points at the right edge of the screen, I did not add that border styling. It disappears if I remove the overflow: scroll; style rule.
Note, I am seeing this behavior in both Chrome and Safari (latest versions of both).
Setting the overflow property to 'scroll' clips the content to size. This prevents the content from exceeding it's container borders horizontally and vertically. It also places a scrollbar horizontally and vertically, regardless of whether it is needed or not.
This will display both scroll bars:
<div id="div1">
Content
</div>
#div1 {
overflow:scroll;
}
The 'auto' value will display a scroll bar vertically, horizontally or both as required.
Change the CSS to:
#div1 {
overflow:auto;
}
You can also set the overflow property for horizontal or vertical only. You can use this over auto if you want to guarantee there can't be a vertical scroll bar.
Change the CSS to:
#div1 {
overflow-x:scroll; /* Set the overflow horizontal property to clip the content
and display a horizontal scroll bar. */
}
overflow-y:hidden; /* Set the overflow vertical property to clip the content,
hide the vertical scroll bar and any content outside of the top/bottom borders. */
}
How would I use overflow-x: hidden on the body, but keep overflow-y: scroll?
I just put overflow: hidden on the body, and it worked (no scrolling on either axis). But when I try to specify an axis, like overflow-x: hidden, suddenly both axes become scrollable.
This should apply only to the body- I don't want to wrap anything inside a "wrapper" div.
This works, but cause both axes to not scroll:
body {
overflow: hidden;
}
This causes both axes to scroll:
body {
overflow-x: hidden;
}
The only thing inside the body is an absolutely positioned element.
I've concluded that this is probably a bug in WebKit. According to this link:
https://css-tricks.com/findingfixing-unintended-body-overflow/
the author mentions this exact problem of specifying an axis inside body. It looks like you would have to use a wrapper div, as mentioned in other questions.
I have a div with the property:
overflow-y: scroll;
On IE11 (havent tested other versions of IE yet) the div has a vertical grey scroll bar. Is there a way to remove this? But still maintain the overflow scroll?
I searched SO for an answer but only could find one relating to the body scroll bars and not a div.
Use auto property
overflow-y: auto;
scroll will always add scrollbar whether content is overflown or not. Using auto will show the scrollbar only when content is overflown.
MDN Doc
I have a div with propertie overflow auto. How to make the content of this div horizontally aligned with and without the scrollbar displayed. The scrollbar is messing with the div width. I hope you understand.
overflow-x: scroll;
overflow-y: hidden;
source: Div with horizontal scrolling only
Try using overflow-y: overlay instead.
.your-content{
overflow-y: overlay;
}
NOTE::: overflow-y: overlay has been deprecated.
But this will make the scrollbar appear as an overlay without affecting the width of div or element.