.iati-list-table {
overflow-x: auto;
overflow-y: visible;
}
The scroll bar appears when I use overflow-visible and when i use overflowy-hidden the tooptip is croped.
how do I make in such a way that overflow x is auto and overflow y is normal(no scroll bar and tooltips are not cropped
)
I think you need to read this and figure it out.
It will help you out:-CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
If you are using visible for either overflow-x or overflow-y and something other than visible for the other, the visible value is interpreted as auto.
Related
jsfiddle.net/etto2sdt/
What I'm trying to do is having a touch scrollable div. The body is set to 100% and I want to be able to scroll the contents inside #testnavwrapper
But it's not working... any ideas?
#testnavwrapper {
width: 100%;
overflow-x: scroll;
}
This will give you a horizontal scrollbar on the #testnavwrapper.
width: 2000px, as you put it, will have no effect as the overflow would occur on the body element (which has overflow set to hidden)
Hope it helps
This question already has answers here:
CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue
(9 answers)
Closed 8 years ago.
I am using overflow-x hidden, which works. But you cant use overflow-y in-conjunction with it.
So I checked out this... http://www.brunildo.org/test/Overflowxy2.html
Am I missing something?
Basically this...
header {
overflow-x: hidden;
overflow-y: visible;
}
is exactly the same as using...
header {
overflow-x: hidden;
overflow-y: scroll;
}
Huh? If I wanted scroll I would use overflow-y: scroll; but it's using it anyway!
Why is this? How can I get round this. I can't do this... http://jsfiddle.net/xMddf/2/
Because in my situation, I need the header to have overflow-y: visible; so my dropdown navigation can be visible.
UPDATE
Please see my fiddle. Please make sure the view finder is bigger than 770px other wise the navigation switched to a mobile nav.
http://jsfiddle.net/joshmoto/42Sgu/
The aim of the game is to keep those RED keyline hidden in the the horizon (like it currently is)
But to allow the navigation drop down to be visible when hovered...
I think the property you're looking for is overflow-y:auto;
Update
It's not your absolute preferred solution, I'm sure, but this works:
http://jsfiddle.net/3zVc4/
Here's the meat of what I did.
#mid-row {
overflow-x: hidden;
}
#top-row {
overflow-x: hidden;
}
And then I removed the overflow-x and overflow-y rules from the header element.
Unfortunately, that's prescribed browser behavior from W3C, as I'm sure you know from searching on this topic. The only way around it is to apply overflow rules judiciously to the elements which need to be hidden.
Hope this helps!
Is there any known reason overflow-y: hidden will remove all scroll bars in IE9?
I've put this in an IE9 only style sheet like this:
body,html {
overflow-x: auto !important;
overflow-y: hidden !important;
}
I'm a genius and had my x and y switched. For future developers that see this. Get sleep, it really helps.
The overflow: hidden property will hide any content that will flow out of the normal boundary of the elements box model. In this case you are setting it to the html, so anything that overflows will hide instead of having the scroll bars. Give this a try and see how this works:
html, body {
overflow-x: auto;
overflow-y: scroll;
}
Here is a great article on all the different overflow properties available and how they work: http://css-tricks.com/the-css-overflow-property/
I have a div with a scollbar as a result of the CSS below. However, when there is no need to scroll, the bar is still there. There is no slider/arrows, but an emtpy bar is just there. Is there a way to only show the bar if the content overflows? Thanks.
#id{
overflow: -moz-scrollbars-vertical;
overflow-x: hidden;
overflow-y: scroll;
}
use
overflow: auto;
then overflow will only be displayed if it actually overflows
auto The behavior of auto isn’t specified in any detail in the CSS2.1
specification. In existing implementations it provides scrollbar(s)
when necessary, but it doesn’t show scrollbars unless the content
overflows the element’s box.
http://reference.sitepoint.com/css/overflow
I'm a css noob, and though I want this DIV to resize when the window is resized, I don't want inner content to change the size of it.
Use the overflow statement. e.g.
overflow: hidden; /* all content hidden as it spills over */
overflow: auto; /* Scroll bars appear on div when required to allow moving around */
overflow: scroll; /* Scroll bars will be present at all times */
Try using:
div {
overflow: hidden;
}
Read more here.
set overflow: hidden on the containing div
Have you looked into CSS and the overflow directive? You can use this to tell the div to scroll or truncate/hide its content when the content is too large.