So currently, I'm using angular material and its default scroll (But I think it is perfect scrollbar) to use as a scroll design to my scroll bar. But the scroll is only showing if the users try to scroll the page/div. I tried to read the scrolling api of the Angular Material but there's no attribute that I can use in here. And I do already put the overflow-y: scroll on the css of course. Any idea? Thanks!
So I found a work around, I need to include pseudo class to my CSS
::-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);
}
And if you need it to a specific element or container
.selectionTable::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
.selectionTable::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
Reference:
Making the main scrollbar always visible
Apply webkit scrollbar style to specified element
Related
I have a pre that scroll-able
As you can see my site is in a darkmode, and that white scroll is ruined it.
I've tried
pre {
background-color: #323338;
scrollbar-color: #323338 black;
}
somehow it's not taking any effects.
Any hints for me ?
Try # 2
<pre class="syslogs" style="overflow-y:auto; height: 500px;"> {{ $logs }} </pre>
.syslogs {
scrollbar-color: #323338 black;
}
Try this:
::-webkit-scrollbar {
width: 6px;
background-color: #f5f5f5;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3);
background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
background-color: #323338;
}
You need to add a custom styling for your scrollbars.
Note that it's not going to work across all browsers, but it will let you improve their style in Chrome and Firefox.
I am trying to make a glassmorphism effect and my problem is that the webkit backdrop filter is not applied to the background of the div.
the css code:
.glassmorphism {
background: rgba( 255, 255, 255, 0.20);
box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37);
-webkit-backdrop-filter: blur(10em);
backdrop-filter: blur(10em);
border-radius: 10px;
border: 1px solid rgba( 255, 255, 255, 0.18);
}
html:
<div id="content__body" class="glassmorphism"></div>
And I get this error in chrome:
invalid property value
Edit;
I just found out the problem myself:
I had two glassmorphism divs over eachother. For some reason that lead to a cancelation of the effect. In short: The styling above works but not for stacked divs
Use 10px instead of 10em
and your backdrop filter is working.
I have a div with overflow: auto
.div {
overflow: auto;
}
and when i try to set the styles for the scrollbar, it doesnt work:
.div::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
.div::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
i tryed targeting with class, id, even the tag, but nothing works.
when i don't target anything before ::-webkit-scrollbar styles, the browser scrollbar acquires the styles, but i want to style the div scrollbar
I think you should use one of javascript plugin to display custom scroll bars. Not all browsers support that what you wrote in your question.
custom scrollbars examples
I have an issue where on my page scrollbars aren't appearing in Chrome on a Mac (haven't tried on a PC). It does work okay in Firefox however.
I've tried the following...
::-webkit-scrollbar {
all: unset;
display: block;
}
To no avail
Looks like the expected behaviour to me, idle scrollbars are invisible on macOS, you can try the following to make them always visible.
::-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);
}
I have an ASP.Net Webforms page which has several controls on it, including several different sized asp.net buttons. There are certain times when I need to disable a button or buttons on this page, which I am able to do without issue, but the issue is that when I do disable them, the text on the button appears to have a carriage return in the text, making the text appear lower on the button then when the button is enabled. (Please see the image below...Edit, apparently I don't have enough points to post an image.)
The image I wanted to post shows the text of the disabled button aligned at the bottom with half the bottom half of the word missing with the text of the enabled button showing correctly.
Here is the CSS code I am using.
.big, .medium, .med-big, .small, .smaller{
display: inline;
text-align: center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
/*text-shadow: 0 1px 0 rgba(109, 5, 5, 0.8);*/
color:black;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
.big:active, .medium:active, .small:active, .med-bid:active, .smaller:active{
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
outline: 0 none;
}
.big:disabled, .medium:disabled, .med-big:disabled, .small:disabled, .smaller:disabled{
display: inline;
text-align:center;
vertical-align:top;
font-family: 'Oswald',sans-serif;
color:grey;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color:#CCCCCC
}
.big{
width: 200px;
height: 30px;
padding: 17px 10px 10px 10px;
font-size:24px;
}
I am disabling the buttons through server side code simply by setting the button's Enabled Property to false.
I'm in the process of moving from more of a Winforms developer (of many years) to a web developer, so any help would be greatly appreciated. I also did search the site for an answer to this issue, and although there are several posts regarding CSS styling a disabled, button, I could not find one for this specific issue.
Thanks.