I created a tooltip, and I have the following CSS. Please note that on Mac, works like a charm but on windows - no luck. Even when the content is not overflowing, the scrollbar tracks show. how can I have my tooltips without them? And if they need them, how can I show only the vertical one.
.tooltip-container {
font-size: 1.2rem;
overflow: scroll;
max-height: 200px;
Hide the x-axis with overflow-x: hidden, on the y-axis use the 'auto' value which will only show the scrollbar if needed
.tooltip-container {
font-size: 1.2rem;
overflow-x: hidden;
overflow-y: auto;
max-height: 200px;
Related
I want the vertical scrollbar for my div to be invisible, but still allow vertical scrolling.
I've tried using overflow-y: hidden but that disables scrolling.
I've tried webkit element::-webkit-scrollbar but that affects horizontal scrollbars too.
I would have thought that webkit's :vertical state would allow me to do it but it doesn't do anything. See codepen: (https://codepen.io/numberjak/pen/MWgOMqd)
Other questions look at BOTH scrollbars, I just care about ONE scrollbar.
<div class="scroll"><div class="large-content"/></div>
.scroll {
overflow: auto;
max-width: 20rem;
max-height: 20rem;
background-color: black;
}
.scroll::-webkit-scrollbar:vertical {
display: none;
}
.large-content {
min-width: 100rem;
min-height: 100rem;
background-color: red;
}
Try this css code..
css
.large-content {
background-color: red;
width: 100%;
height: 100%;
}
You can do the following to hide scrollbars:
-webkit- (Chrome, Safari, newer versions of Opera):
.scoll::-webkit-scrollbar { width: 0 !important; }
-moz- (Firefox):
.scroll { overflow: -moz-scrollbars-none; }
-ms- (Internet Explorer +10):
.scroll { -ms-overflow-style: none; }
Important points to be considered before hiding the scroll bar:
Preferably hide scrollbars only if and when all content is visible else the user may skip the content.
Avoid horizontal scrolling on web pages and do not hide horizontal scroll bar as they can make content difficult to read
If at all, hiding scroll is required: Display all important information above the fold. Users may often decide if they want to stay or not on what they can see without scrolling.
Reference
Here on this page I need to display the SPACIAL and RECOMMENDED section in in single line with horizontal-scroll.
My current css is
.box-product {
width: 100%;
overflow: auto;
}
I have tried like this
.box-product {
width: 100%;
height: 320px;
overflow-x: scroll;
overflow-y: hidden;
}
But it does not enable horizontal scroll, It still shows the vertical scroll.
Set width to .box-product equal to product width * product count. Nothing else.
Now, you have there width: 100%; (737px) and the default CSS behavior in this case is to break the content to another line. When you have there overflow: hidden, the second line is hidden.
Provide your box-product class width in pixel not in percentage. And than apply overflow:auto.
It will work.
Ex:
.box-product {
width: 100px;
overflow: auto;
}
And if you want only horizontal than add overflow-x:auto;
The easiest way to achieve this .box-product { width: max-content; } (modulo vendor prefixes).
Alternatively display: flex, since its children do not wrap by default.
Remove the width: 100% and make sure your content doesn't float.
I'm working on a header that's intended to overflow. It's got white-space: nowrap rule applied in order to prevent breaking the text into two or more lines.
The problem is, the viewport now stretches to fit the text and then the page is scrollable on the x-axis. Applying overflow-x: hidden hides the scrollbar, but it's still possible to scroll the page on mobile, and on desktop through middle mouse button drag.
I know I could use position: fixed, but that's not a solution for me. I want the header to stay where it is.
Here's a fiddle with all my attempts so far.
Ok, try applying this:
CSS:
.wrapper {
position: absolute;
width: 98%;
overflow: hidden;
}
.text {
font-size: 500%;
white-space: nowrap;
display: block;
width: 100%;
float: left;
}
edit: oh, and remove overflow-x: hidden; from html,body
My html page displays empty disabled scrollbar, please see attached screenshot
How can i hide this scrollbar completely?
EDIT:
Sorry my mistake, i didn't mentioned that i am using overflow:hidden, but cannot hide this scroll bar.
i am copying my body code below
body {
color: #000000;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
overflow-x: hidden;
overflow-y: hidden;
}
I suspect it has nothing to do with overflow on your BODY element.
Even if you set overflow-y and overflow-x it's just like using the shorthand:
overflow: hidden;
same as for your margin, use only:
margin: 0;
// You have also other shorthand variants like:
// margin : top right bottom left;
// margin : topBottom rightLeft;
// margin : top rightLeft bottom;
// helps to keep your CSS file clear as possible.
So the probable issue lies in some most outer common parent element like some wrapper or container that has probably a style set to overflow: scroll;
like in this demo
Set overflow: hidden; in your CSS for the body:
body {
overflow: hidden;
}
Or to handle just the verticle scrollbar
body {
overflow-y: hidden;
}
I am trying to make a div featuring thumbnails to have a set width (330px) and set height (100px), and make it so the content is arranged horizontally, so that a horizontal scroll bar is used to view the content.
Please see the row of thumbnails in the bottom right corner of my website: http://stevenlloydarchitecture.co.nz/building.html
I want to make it so that only four of the thumbnails are visible, and you scroll horizontally to see the others.
However when I try to specify width the thumbnails get moved below each other (as is currently displayed). I tried making a parent Div (with id "slider" in my example) to set the width and height, and have tried as many combinations of specifying width,height and overflow to the divs on the hope of forcing a horizontal scroll but nothing has worked and I am completely stumped. Thanks in advance for any tips.
You can add the following styles to the #slider div to get only a horizontal scrollbar that scrolls through the images. Afterwards, its just sizing and positioning the div. The white-space: nowrap property tells the images not to wrap to next "lines".
#slider {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
}
#thumbset {
overflow: visible;
}
You can try the following css :
#slider {
width: 330px;
overflow-x: scroll;
overflow-y: hidden;
}
#thumbset {
width: 550px;// whatever width you want
}
Use this code:
<div style="width: 300px; height: 40px; border: 1px solid black; overflow: auto; white-space: nowrap; font-size: 14px">
Here's a random text .............
</div>
see how this code works in this fiddle, it's an easy way : add horizontal scroll bar