I'd like for my divs to not have that white area (where the scroll bar thumb appears). I'm not sure how to recreate this because it appears randomly on chrome and safari.
this is the div
.column-content{
height:60vh;
padding: 10px 3px 0 3px;
overflow:scroll;
touch-action: none;
#media screen and (min-height:1100px){
height: 70vh;
}
}
I need it scrollable but I also don't want that ugly white bar to show up... I've tried setting the webkit scroll track on my index.html file but it doesn't do anything.
maybe you are searching for the webkit-scrollbar ?
.column-content::-webkit-scrollbar {
display: none;
}
but as it is webkit, it's not compatible with all browsers.
aslo you set overflow:scroll, do you need scrolling on the two axis ? if not, you can consider setting it to auto.
Related
I have this really simple form: http://jsfiddle.net/TKb6M/91/. Sometimes, when I zoom in or out using Chrome, the input borders disappear. For example, when I zoom to 90% I get:
Naturally, your mileage may vary.
In case you're wondering about those <span> tags, I added them following the recommendation at How do I make an input element occupy all remaining horizontal space?.
Is there a problem with my CSS or is this a Chrome bug? It seems to work fine on Firefox. What can I do to avoid this behavior?
Thanks.
I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:
If you have a table border like this one:
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Change it to this one:
INPUT,TEXTAREA {
border-top: thin solid #aaa
}
I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
I hope it helps
You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours.
If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).
You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .
Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.
I know I'm late in the game, but fudging it a bit and set the border width to 1.5px seems to do the trick every time.
I had the same problem with a bordered div wrapping borderless input , and all the great answers here does not helped me.
Finally, adding:
overflow: auto;
to the div element (the one with the problematic border) did the trick.
It's because your setting a fixed height, and when zooming the input is growing larger than that height, making the border disappear. Use line-height and padding to get the desired height instead - see updated Fiddle
Update: Ignore what I said, it's because you're setting overflow:hidden on your span, removing that should do the trick. Might result in a need to change width of input though.
On a side note; you're making your span a block element which is fine and works, but it looks a bit bad. Try using block elements, like a instead of changing an inline element to a block, if possible.
I had a similar issue with chrome in 2018 - the top border was missing on inputs and textareas. The fix was to specify the top border in css simply as
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
I can't explain why that was needed, and it was only losing the borders in certain places, but at least that was a quick workaround.
In case overflow: hidden is neccessary , mention overflow: hidden only for the browser you are facing the width issue . In other browser, metion display: flex so that the width is automatically taken correct and also, so that on zooming in/out the borders do not disappear.
For example :
Width was not correct in my case only for IE, so I mentioned :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
And the zooming in/out issue was occuring in firefox and chrome, so I mentioned
.spanStyles {
display : flex;
}
this resolved my issue in all browsers.
thanks for all your answers above, I got the border issue such as this, the border display is a mess when zoomed down. finally found overflow: hidden worked for me.
export const InputWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 56px;
border-radius: 4px;
border: 1px solid #707070;
padding: 16px 0 16px 16px;
overflow: hidden;
I have problem with scrollbar with an inner container. The main issue is that scrolling the mouse wheel only scrolls the outer scrollbar while I expect the inner scrollbar to scroll when I'm hover it and also why is the scrollbar styled differently (at least in Chrome, in Firefox it shows ok)?. I am not sure what is happening but I think it's caused by CSS somehow. I use Bootstrap framework (BS3 and BS4 both show the problem) and the row container has the following CSS
{
position: absolute;
width: 100%;
overflow: auto;
border: 1px solid #c0c0c0;
background-color: #f7f7f7;
padding: 0;
z-index: 1000;
vertical-align: middle;
display: block;
}
You can see from the print screen below that the scrollbar is styled differently (there's no top/bottom arrows at least in Chrome), I have no clue why and I didn't apply any styling to the scrollbar.
There's a live demo here Angular-Slickgrid - Row Detail, click on the "+" icon to open any of the row detail container. Also note that I'm the author of Angular-Slickgrid (which is a wrapper library of SlickGrid) and it's a library used by few hundred people.
However note that the same demo works in SlickGrid - Row Detail which basically the same demo but in plain html/css, it uses jQueryUI instead of Bootstrap.
It might actually be Angular that cancels the scroll, I see this mousewheel event handler and if I remove it then it works
So I've hidden my scrollbar on Chrome with this piece of code:
::-webkit-scrollbar {
width: 0px;
background: transparent;
}
And I found that the best way to hide it in Firefox is to set margin-right: -16px on the parent div. And in Firefox, that looks great. However, the issue is now in Chrome because it moves the entire content inside the parent div to right. If I try to fix it by adding margin-right: 16px to the container inside the parent div, then it messes things up in Firefox.
I'm sure you've encountered this before, but is there anything I can do to fix this? Any known solutions?
Thanks!
If you just want to visually hide the scrollbar and still allow user to scroll with mouse or keyboard, you can try the following css:
html {
overflow: -moz-scrollbars-none;
}
You can just give padding only for chrome
::-webkit-scrollbar {
width: 0px;
background: transparent;
-webkit-padding-end: 16px;
}
Or just set -webkit-padding-end: 16px; on the parent div .
And you can use the same idea on Firefox also , Just setup this
#-moz-document url-prefix() {
parent div {
margin-right: -16px;
}
}
So the margin get only Firefox and you don't anything to change .
#-moz-scrollbars-none If you go to https://developer.mozilla.org/en-US/docs/Web/CSS/overflow and look at the Mozilla Extensions section, it says that "-moz-scrollbars-none" is "an obsolete API and is no longer guaranteed to work." Better to go with an approach that is more stable.
I have this really simple form: http://jsfiddle.net/TKb6M/91/. Sometimes, when I zoom in or out using Chrome, the input borders disappear. For example, when I zoom to 90% I get:
Naturally, your mileage may vary.
In case you're wondering about those <span> tags, I added them following the recommendation at How do I make an input element occupy all remaining horizontal space?.
Is there a problem with my CSS or is this a Chrome bug? It seems to work fine on Firefox. What can I do to avoid this behavior?
Thanks.
I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:
If you have a table border like this one:
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
Change it to this one:
INPUT,TEXTAREA {
border-top: thin solid #aaa
}
I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc
I hope it helps
You are forcing Chrome to do subpixel calculation, and this usually has strange behaviours.
If you change the height of the input to 30px, then a 90% zoom works ok (because this is 27px), but a zoom of 75% not (because this is 22.50 px).
You can also avoid this by giving the border a width of 3px. In this case, you will see that the borders width is different in different places .
Anyway, the very best solution is to give more space around the inputs so that the border can be drawn cleanly even if it is in a subpixel position.
I know I'm late in the game, but fudging it a bit and set the border width to 1.5px seems to do the trick every time.
I had the same problem with a bordered div wrapping borderless input , and all the great answers here does not helped me.
Finally, adding:
overflow: auto;
to the div element (the one with the problematic border) did the trick.
It's because your setting a fixed height, and when zooming the input is growing larger than that height, making the border disappear. Use line-height and padding to get the desired height instead - see updated Fiddle
Update: Ignore what I said, it's because you're setting overflow:hidden on your span, removing that should do the trick. Might result in a need to change width of input though.
On a side note; you're making your span a block element which is fine and works, but it looks a bit bad. Try using block elements, like a instead of changing an inline element to a block, if possible.
I had a similar issue with chrome in 2018 - the top border was missing on inputs and textareas. The fix was to specify the top border in css simply as
INPUT,TEXTAREA {
border-top: 1px solid #aaa
}
I can't explain why that was needed, and it was only losing the borders in certain places, but at least that was a quick workaround.
In case overflow: hidden is neccessary , mention overflow: hidden only for the browser you are facing the width issue . In other browser, metion display: flex so that the width is automatically taken correct and also, so that on zooming in/out the borders do not disappear.
For example :
Width was not correct in my case only for IE, so I mentioned :
#media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
.spanStyles {
display: block;
overflow: hidden;
}
}
And the zooming in/out issue was occuring in firefox and chrome, so I mentioned
.spanStyles {
display : flex;
}
this resolved my issue in all browsers.
thanks for all your answers above, I got the border issue such as this, the border display is a mess when zoomed down. finally found overflow: hidden worked for me.
export const InputWrapper = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
width: 100%;
height: 56px;
border-radius: 4px;
border: 1px solid #707070;
padding: 16px 0 16px 16px;
overflow: hidden;
What CSS is required to make the browser's vertical scrollbar remain visible when a user visits a web page (when the page hasn't enough content to trigger the scrollbar's activation)?
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Update: If the above does not work then just using this may.
html {
overflow-y:scroll;
}
Make sure overflow is set to "scroll" not "auto." With that said, in OS X Lion, overflow set to "scroll" behaves more like auto in that scrollbars will still only show when being used. So if any the solutions above don't appear to be working that might be why.
This is what you'll need to fix it:
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
You can style it accordingly if you don't like the default.
Things have changed in the last years. The answers above are not valid in all cases any more. Apple is pushing disappearing scrollbars everywhere. Safari, Chrome and even Firefox on MacOs (and iOs) only show scrollbars when actually scrolling — I don't know about current Windows/IE. However there are non-standard ways to style scroll bars on Webkit (IE dropped that a long time ago).
html {
overflow-y: scroll;
}
Is that what you want?
Unfortunately, Opera 9.64 seems to ignore that CSS declaration when applied to HTML or BODY, although it works for other block-level elements like DIV.
html {height: 101%;}
I use this cross browsers solution (note: I always use DOCTYPE declaration in 1st line, I don't know if it works in quirksmode, never tested it).
This will always show an ACTIVE vertical scroll bar in every page, vertical scrollbar will be scrollable only of few pixels.
When page contents is shorter than browser's visible area (view port) you will still see the vertical scrollbar active, and it will be scrollable only of few pixels.
In case you are obsessed with CSS validation (I'm obesessed only with HTML validation) by using this solution your CSS code would also validate for W3C because you are not using non standard CSS attributes like -moz-scrollbars-vertical
body { height:101%; } will "crop" larger pages.
Instead, I use:
body { min-height:101%; }
An alternative approach is to set the width of the html element to 100vw. On many if not most browsers, this negates the effect of scrollbars on the width.
html { width: 100vw; }
I was able to get this to work by adding it to the body tag. Was nicer for me because I don't have anything on the html element.
body {
overflow-y: scroll;
}
Setting height to 101% is my solution to the problem.
You pages will no longer 'flick' when switching between ones that exceed the viewport height and ones that do not.
body {
min-height: 101vh;
}
works the best for me
I do this:
html {
margin-left: calc(100vw - 100%);
margin-right: 0;
}
Then I don't have to look at the ugly greyed out scrollbar when it's not needed.
html { height:initial!important; }
You may not need the !important - depends on what CSS is in place.