I have set overflow-y : visible but it acts like scroll. I need overflow-x: scroll;overflow-y: visible. How can I set them both? my table need horizontal scrollbar. I have a dropdown list. but dropdown list is floating inside the table it is not coming outwards. while dropdown is appearing vertical scroll bar also coming
I found that if we give overflow-y: visible; overflow-x: scroll; then it will not work both will act as overflow scroll.
Related
I have a menu that collapses under a certain width.
The menu has a fixed position and I want that it covers thw whole page height and width. So I set the width and height to 100vw and 100vh.
My problem is that the content under that fixed div is scrollable. There is a way to make those div not scrollable?
This is a sample. As you can see when the mobile menu shows up it covers the whole height and it seems that content disappears
https://www.milanbergamoairport.it/en/
I can make a codepen if it is neeeded
Thanks!
Didn't really get the full picture of your problem but adding overflow-x: hidden; overflow-x: hidden ; hides the scroll
I'm not too sure what you mean... Maybe overflow-y: hidden; is what you're searching for... if not, please provide a codepen example
I have an html table that I want to able scroll horizontally, and never vertically.
HTML goes basically like this:
<div id="wrapper">
<table id="the-table"></table>
</div>
CSS:
#wrapper {
overflow-x: scroll;
overflow-y: visible;
}
When the css is set this way. I see two scrolls: vertical and horizontal.
The table has several select elements in every row. I want them to overflow vertically when they are clicked.
The reason for the horizontal scroll is that I want it to be scrollable in the smaller screens.
Edit: overflow-y: hidden does not work because the select elements in every row. I absolutely want them to overflow vertically.
I tried incorporating scroll to my overflowing div element in CSS
using the overflow property. But it is attaching both vertical and horizontal scrollbars. I only need vertical scroll. How can I accomplish this with the least lines of code and no javascript or frameworks? Thanks.
.div{
overflow: scroll;
}
overflow-x for horizontal scroll
overflow-y for vertical scroll
So...
.div { overflow-y: scroll; }
Read more at MDN:
overflow-y
overflow-x
overflow
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 want that the scollbar is hidden but you can still scroll.
if I now do:
body{
overflow-y:hidden
}
the vertical scroll is hidden but you can't scroll.
my question: is there a way to hide the scrollbar but you can still scroll?
You can try to add padding-right:20px; and overflow-x:hidden; to the overflowing element, hiding the scrollbar. Not sure if it works on body though.