transparent background on scrollbar track - html

I have a div with lines to separate different sections, with a scrollbar on the x axis. I have a feature so that when the user hovers over the div, the scrollbar thumb shows. However, the scrollbar track leaves a white line across the bottom of the div. I tried background: none; and setting the background to a transparent image. Is there any way to fix this?
code sand box: https://codesandbox.io/s/festive-hermann-xejx0?file=/src/App.js

div::-webkit-scrollbar{ background: 0}
div:hover::-webkit-scrollbar{ background: #aaa; height: 25px }
div:hover::-webkit-scrollbar-thumb{ background: #fff; border-radius: 10px}
Unfortunately, css is inconsistent and "0" cannot be replaced with "none".
It is -webkit- It has only partial support, for chrome and Opera works, for IF and FF (which I can't test right now) you may add without any prefix
div::scrollbar{ background: 0}
After all, it will look different on different devices - as always with limited support. You can do your best for supported browsers, but one always comes out with a white bar (which isn't ugliest thing in the world).
I'm afraid there's nothing else to do with css. I don't use js so I won't start to reinvent the syntax, especially since I'm not sure if the scrollbar track is reachable by js.
If you are very determined there are always some CSS tricks like - add a curtain with position: relative; bottom: 10px or maybe a very funky box-shadow, but I think it's not a good practice, but rather a headache ...
Maybe - this dark filter should be darker from the bottom?

It doesn't work because a div cannot have both
overflow-y: visible;
overflow-x: scroll;
overflow-y gets changed to auto. Therefore the vertical lines cannot overflow outside of the div vertically.
Its also not recommendable to use ::-webkit-scrollbar as it has poor compatibility.
As you are using react, you should instead look at using a Progress bar on scroll component.

Related

Why are my some element borders fainter than others? [duplicate]

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;

How do I make an ::after element stick to the right of the screen?

I'm doing all of this to modify an already existing website using an extension called Stylus. Also, I'm doing this on Android. I use a browser called Kiwi Browser. It supports extensions.
I'm trying to make an element that sticks to the right of the screen so as to hide the scroll indicator on Android.
I can't hide that with ::-webkit-scrollbar {display: none} or any variation of it because that element seems to be part of Android. My current solution is to add border-right: 5px solid gray !important to the body element or any element where that would work.
I exaggerated the width there a bit so it'd very visible. With that border in place, the scroll indicator becomes invisible or unnoticeable because it has the same color as the border. Now, my problem is that when I zoom in on the page, especially on the very left part of the page, that scroll indicator is noticeable again. That's why now I want to try using ::after. I'm trying to create an element that will stick to the right of screen even if I zoom in. I also don't want it to float. I want it to occupy space so that the content of the page will resize. I tried this code (which I also found here on stack) but it didn't work:
body::after{
content: " ";
position: -webkit-sticky !important;
position: sticky !important;
top: 0;
right: 0;
background: gray;
height: 100%;
width: 10px;
z-index: 9999 !important;
}
I use Kiwi Browser to read manga and comics. And the reason I want to hide that scroll indicator is because when you touch any part of the screen, that indicator appears and I can see how much is left from what I'm reading and that really ruins the mood for me.
Edit:
It seems that half of what I want to accomplish is not possible with just CSS. For reference: Prevent that a fixed element resizes when zooming on touchscreen

Is an h1 with border images and dynamic width possible?

I am trying to create this ribbon effect dynamically using an h1:
I have these two images:
and my goal is to stick these on each end of my h1 tag, use the display: inline; property to add dynamic width. Is there any "right way" to do this and make it work cross browser?
For my testing purposes, the ribbon ends are 40px tall, and 18px wide. I am not sure yet what I am going to do about the shadow, but if you guys can just help me figure out how to get this working, I can make it look nice. (hopefully)
For clarification purposes, here is the (non-working) css I have so far:
h1 {
display: inline;
height: 40px;
background-image: url(images/ribbon/left.png), url(images/ribbon/right.png);
background-position: left, right;
padding: 0 18x;
background-color: #ECECEC;
}
The css above causes the #ECECEC color to bleed behind the ends of the ribbon. Any ideas?
Update:
If it helps, here is a screen shot of what my current css is bringing me. This is a little sensationalized to make the result easier to see. I have added a red background instead of the #ECECEC.
First try
overflow: hidden
It could also be a browser issue:
Border Radius = Background Bleed
EDIT:
Have you thought about not using the images all together and just using pure css
http://css-tricks.com/snippets/css/ribbon/
May not look like you wanted but messing around with the css would fix this.

Borders disappear in Chrome when I zoom in

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;

Making the main scrollbar always visible

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.