I have code below :
<div className={cx('overflow-x-scroll')}>
<TabNavigation data={tabs}/>
</div>
I need a custom size thumb scrollbar, from big to small. I am using the tailwind-scrollbar package but my machine is not supported because my project is using node v12.22.9. I have also been browsing but still can't find the answer.
Tailwind-scroll bar does not provide a solution to change the size of the scrollbar.
You can use CSS to do that:
/* Select the scrollbar track */
::-webkit-scrollbar-track {
/* Change the background color */
background-color: #f1f1f1;
}
/* Select the scrollbar thumb */
::-webkit-scrollbar-thumb {
/* Change the background color */
background-color: #888;
/* Change the size of the thumb */
height: 30px;
width: 30px;
}
Related
I've set up my own custom scrollbar with CSS, and I'd like to know know how to only apply these settings to my vertical crossbar.
I've looked up other posts to fix this, but haven't been successful in implementing their solutions in my project.
Any fix that either removes my horizontal scrollbar completely or resets its settings to default would be greatly appreciated.
Here's my code:
::-webkit-scrollbar {
width: 20px;
}
::-webkit-scrollbar-track {
background-color: rgb(26, 23, 23);
}
::-webkit-scrollbar-thumb {
background-color: hsl(270, 2.9%, 48.7%);
border-radius: 20px;
border: 6px solid transparent;
background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
background-color: hsl(270, 2.9%, 78.7%);
}
edit: The problem seems to have been related to other pre-built styles overriding overflow-x. overflow-x: hidden !important; solved the issue.
The questioner have faced a problem that a WebKit engine won't allow him to remove customized horizontal scrollbar.
It seems that the implementation of such a removal vary from one browser to another and there's no universal way to hide scrollbars.
Using overflow: hidden will disable the scroll and that’s not what we want.
So we’ll need another way to hide the scrollbar.
Unfortunately, there is no universal CSS property that does something
like this
div {
scrollbar-visibility: hidden; /* <--- I wish we had this one !! */
}
We’ll need to implement different CSS properties for each browser.
For Firefox, we can set the scroll-bar width to none.
scrollbar-width: none; /* Firefox */
For IE, we’ll need to use -ms prefix property to define scrollbar style
-ms-overflow-style: none; /* IE 10+ */
For Chrome and Safari. We’ll have to use CSS scrollbar selector.
Then apply display: none to hide it.
::-webkit-scrollbar {
display: none; /* Chrome Safari */
}
Or you can set it’s width and height to 0.
::-webkit-scrollbar {
width: 0;
height: 0;
}
https://redstapler.co/css-hidden-scrollbar-while-scrollable-element/
Nevertheless, the following solution took effect in questioner's situation:
overflow-x: hidden !important;
I'm creating my site based on bootstrap But wanna do some customization.
Any idea to overwrite the bootstrap default style with this one
I know to replace the box style to underline only can use this
border: 0;
outline: 0;
But not knowing how to bend the line
I looked up the relevant Bootstrap 3.3.7 (most recent non-alpha) code for you, which would be the .form-control class.
If you override that class with the following CSS you will likely achieve the effect you are looking for.
.form-control {
border: 0; /* to hide border initially */
border-bottom: 1px solid #ccc; /* to set the bottom border (the only one we need) */
border-radius: 8px; /* to round borders or 'bend the line' */
}
Thus, border-radius is the CSS property you are looking for.
My HTML is like this:
<li>Facebook</li>
I'm using the fontello icon font system however, I can't seem to work out how to make the word Facebook disappear and the icon remain! The generated content looks like this:
<li>:before "Facebook"</li>
Thanks
(note: I know I can add a span to the text and toggle it but I thought there may have been a purely CSS way to do it?)
This is one way
.icon-facebook {
text-indent: -9999px; /* sends the text off-screen */
background-image: url(/the_img.png); /* shows image */
height: 100px; /* be sure to set height & width */
width: 600px;
white-space: nowrap; /* because only the first line is indented */
}
.icon-facebook {
outline: none; /* prevents dotted line when link is active */
}
and there's also another. I found this question answered here:
Hide text using css
I know you can change the cursor of a web page with an image, but is it possible to 'style' the cursor only using CSS?
Something like...
div.changecursor:cursor {
width: 10px;
height: 10px;
background: blue;
border-radius: 199px; /* make it a circle */
}
The cursor property allows the use of an url linking an image to be used as cursor.
In that way you may customize as much as you want
property and value
.classX {
cursor: url(myCursor.cur);
}
Ok with a gif, etc
Take a look at this in IE9:
http://jsfiddle.net/dalgard/n6PDB/show/
screen dump:
Read these comments:
/*
* IE9: Upon moving the mouse a ghostly 1px vertical line appears 53px into the
* blue area - only works with normalized CSS (!?) and not inside an iframe
*/
#test {
width: 152px; /* must be 152px or larger! */
height: 200px; /* can be any height */
border-radius: 1px; /* must be 1px or larger */
background-color: #44f; /* ghost-line becomes invisible with #00f */
}
#test:hover {} /* removing this makes the line disappear */
#test div {
opacity: 0; /* removing this makes the line disappear */
position: relative; /* removing this makes the line disappear */
left: 53px; /* must be 53px or smaller! */
width: 10px; /* must be 1px or larger */
height: 150px; /* height of the ghost-line */
}
Does anyone have any opinion on this?? What is going on and how can I report this? How do I keep this from happening (I know, it seems I could just change ANY of the attributes in the above, however it's not so easy...)?
the line has to do with the border of the parent container AND the inner div. If you get rid of the inner div OR the border it resolves the issue. I don't know if this will help but that's what appears to be the problem.
I can see the issue on IE9
Version: 9.0.4 (KB2618444)
but it seems to be fixed on
Version: 9.0.24 (KB2909921)