I have a popup menu and i want scrollbar to appear only when it can scroll ("when overflow").
But if i apply
.popup-window {
overflow-y: scroll;
}
It appears like this (dont care about text):
Screenshot
On real page it looks worse
It's simple, you shouldn't add overflow-y: scroll, you need default property
.popup-window {
overflow-y: auto;
}
Scroll will appear if block overflow by y. Probably you need to add overflow-x: hidden;
Use overflow:auto to make it work with overflow-x and overflow-y .
It will only add scrollbar if it is needed.
.popup-window {
overflow: auto;
}
Use
.popup-window {
overflow-y: hidden;
}
Related
It is need that the scroll bar does not disappear with overflow: hidden; , because the content jumps. Are there any options to keep it visible other than styling it?
I found many answers on how to hide the scroll, but I need the opposite
Hope it's work for you !!!
you just need to add style for html tag overflow: scroll; and for body tag overflow: hidden; like ...
html{overflow: scroll;}
body{overflow: hidden;}
I have an element that shows my GitHub contributions, this file has static width and to make it look nice on smaller devices I decided to use overflow-x set to auto to allow horizontal swipe with finger gesture.
I would like to see the scroll position to the very right by default so that the most recent contributions are being shown.
I assume it's not possible with CSS and I need to use some JS?
Here's the basic CSS that I wrote:
.my-github-contributions-chart-wrapper {
#include breakpoint(medium down) {
width: 100%;
white-space: nowrap;
overflow-x: auto;
}
Here is what I want to achieve. Currently I have to manually scroll to the right.
I knew that I can do this in pure CSS. I forgot about rtl direction.
#include breakpoint(medium down) {
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: visible;
direction: rtl;
}
Simply apply direction: rtl; to the element with the overflow-x defined.
I have a problem hiding the scrollbar on my page but I still want to be able to scroll.
I know I can use
::-webkit-scrollbar {
display:none;
}
, but its obviously not working on Firefox or other non-webkit browsers.
Ive read a lot of threads explaining how can I accomplish this, but i just cant get it to work.
Can someone help me with this?
Website: http://test.6f.sk/
html {
overflow: -moz-scrollbars-none;
}
or any other element where you want to disable scrollbars
The best answer I know of is to just position the scrollbars out of view:
.crop {
width: 300px;
overflow-x: hidden;
}
.scroller {
width: 300px;
height: 200px;
overflow-y: scroll;
/* Must be ≥ scrollbar width. Scrollbar width varies by
* browser, OS, and config, so don't be precise, choose
* something wider than any scrollbar.
*/
padding-right: 50px;
}
<div class="crop">
<div class="scroller">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
11<br>12<br>13<br>14<br>15<br>16<br>17<br>18<br>19<br>20<br>
</div>
</div>
Also worth noting that ::-webkit-scrollbar { display: none; } produces buggy behavior in Safari (current version 11.0.1) when used to hide a horizontal scrollbar on a page with an enabled Back button.
I have a div (id="c_content) which I want to expand vertically depending on how long the content is without displaying the contents which overflow horizontally.
I am using the following code at the moment and it doesn't seem to work:-
#c_content {
min-height: 645px;
max-height: 2000px;
overflow-y: inherit; overflow-x: hidden;
}
When I use the above code, the content which overflows vertically is hidden. What should happen is, the div should expand vertically in order to show the content. But that doesn't seem to happen.
edit: when I set overflow-y: visible; instead of overflow-y: inherit;, I get a scroll bar for y axis (http://prntscr.com/108wsm) - still not what I wanted.
I would like to know if there is any way to fix this even if I have to user another code like Java or Jquery
Use cross browser min-height trick .. It will expand div when necessary.
#c_content {
min-height: 645px;
height:auto !important;
height: 645px;
max-height:2000px;
}
inherit is not a valid value for the overflow-y property. Try setting it to overflow-y:visible;
This is the simple code:
<div id="container">
<div id = "information">
</div>
</div>
When I change the "information" to width 1000, and container width 100, the "information" become very long, but I would like to let the information div inside the div...I means, I want the container have a scroll bar, if the information's width is longer than the container. How can I do so? Thank you.
#container {
overflow: auto;
}
This should do the trick:
#container
{
overflow: auto;
}
Set overflow: auto in the stylesheet.
That said, it is almost always better to make use of the available space and not introduce small regions with their own scrollbars (which are harder to deal with with AT, and require scrolling more frequently to read)
Or use overflow-x and overflow-y to limit the scrolling to just vertical or horizontal.
#container { overflow-x: auto; } /* Horizontal scrolling only */
or
#container { overflow-y: auto; } /* Vertical scrolling only */