I currently have a custom scrollbar like below. My page has 5 scrollable elements. How do I only have one scrollbar show up when scrolling that element while hiding the rest?
/*custom scrollbar*/
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background-color: rgba(50, 50, 50, 0.1);
-webkit-border-radius: 8px;
border-radius: 8px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 8px;
border-radius: 8px;
background-color: rgba(50, 50, 50, 0.2);
}
::-webkit-scrollbar-track:window-inactive {
background: transparent;
}
::-webkit-scrollbar-thumb:window-inactive {
background: transparent;
}
You can use the CSS property overflow: auto. This will only show the scrollbars when they're needed
You can hide all scrollbars with:
body { overflow: hidden }
As you indicate 'auto' shows scrollbars if content overflows.
I have never tried it but it may be possible to use JavaScript to get closer to what you describe but I have serious doubts about the ergonomics of such a design.
Related
I need to customize only the width of the scrollbars of Chrome browser using CSS, but need rest of things (like hover effect, color on hover, scrollbar track color, scrollbar button color etc, color of scrollbar on click etc.) as it is.
How can I do it?
I know that we can change the width of the scrollbar using following css:
::-webkit-scrollbar {
width: 12px;
}
body::-webkit-scrollbar {
width: 1em;
}
body::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
body::-webkit-scrollbar-thumb {
background-color: darkgrey;
outline: 1px solid slategrey;
}
You can do like that
::-webkit-scrollbar is for the entire scrollbar
handle is scrollbar where you can add background like that and apply also pseudo elements or the draggable scrolling handle.
track is the progress bar of the scrollbar.
::-webkit-scrollbar {
width: 5px;
}
/* Track */
::-webkit-scrollbar-track {
background: #1B242F;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #04C2C9;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover{
background: #04C2;
}
For more info visit this link
This seems to be a fairly common and not-fancy use case, but I haven't run into it before. I set up a pen, but can't replicate it there, and I'm pulling my hair out trying to figure out why.
Demo Pen
The left sidebar has a custom scroll-window for a list of items, but though setting overflow-y: scroll gives me a nice scrollable list, it also creates a huge block of whitespace equal to the height of the list on the left if overflow-y wasn't set to scroll. This whitespace is outside of the HTML tag (and because that blue background stops). So it appears there's something going on with height calculations, but I just don't know what else I can play with.
In my app, I've tried commenting out both the overflow-y and display: grid on my content wrapper, and upon doing either, the whitespace disappears. But of course I need both of these properties. Do I need to set another height somewhere?
I found the issue finally! Had to do with absolutely-positioned elements. I'm using custom checkboxes to do a filled square instead of the browser's defaults, and part of that code (which I borrowed and modified) was to set the input itself to position:absolute which took it out of normal flow of course (hence why my 100vh wasn't making a difference). Adding simply top: 0 fixed it all. I'd love if somebody could explain why setting top to its default value makes a difference here.
HTML (Angular)
<li class="flex justify-between" *ngFor="let error of hardSummary">
<input class="m-checkbox" id="{{'h' + error.errorCode}}" type="checkbox" [(ngModel)]="error.isChecked" (click)="filterByError(error)">
<label for="{{'h' + error.errorCode}}">
{{error.errorCode}}
</label>
<span>{{error.count}}</span>
</li>
SCSS:
.m-checkbox {
position: absolute;
opacity: 0; // hide it
top: 0; // <<<<<<< THIS IS ALL THAT I NEEDED TO ADD
& + label {
position: relative;
cursor: pointer;
padding: 0;
}
// Box.
& + label:before {
content: '';
margin-right: 4px;
display: inline-block;
vertical-align: text-top;
width: 20px;
height: 20px;
background: #f4f4f4;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 3px;
}
// Box hover
&:hover + label:before {
background: #d8d8d8;
}
// Box focus
&:focus + label:before {
border: 1px solid #666;
}
// Box checked
&:checked + label:before {
background: #448aff;
}
// Disabled state label.
&:disabled + label {
color: #b8b8b8;
cursor: auto;
}
// Disabled box.
&:disabled + label:before {
box-shadow: none;
background: #ddd;
}
// Checkmark. Could be replaced with an image
&:checked + label:after {
content: '';
position: absolute;
left: 5px;
top: 11px;
background: white;
width: 2px;
height: 2px;
box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
transform: rotate(45deg);
transition: all 0.2s;
}
}
I am using .table-responsive class to make my Bootstrap tables responsive and it's working fine but the user doesn't have any indicator that the table is horizontally scrollable!
How can I make the horizontal scrollbar always displayed, not only after the user actually starts scrolling.
Edit
The solution mentioned here almost works: Always show scrollbars in iPhone/Android:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 12px;
}
::-webkit-scrollbar:horizontal {
height: 12px;
}
::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
Its problem is showing the scrollbars everywhere, not just to .table-responsive class. How I can restrict it?
Sorry for being 5 years late, but you must add .table-responsive before the pseudo-element, like this:
.table-responsive::-webkit-scrollbar {
-webkit-appearance: none;
}
.table-responsive::-webkit-scrollbar:vertical {
width: 12px;
}
.table-responsive::-webkit-scrollbar:horizontal {
height: 12px;
}
.table-responsive::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, .5);
border-radius: 10px;
border: 2px solid #ffffff;
}
.table-responsive::-webkit-scrollbar-track {
border-radius: 10px;
background-color: #ffffff;
}
You can enclose your table with:
<div style="overflow-x:scroll;">
If you add overflow-x:scroll to the <768 breakpoint, it will always show the scrollbar below 768px. But as a caveat, it will also show when there is nothing to scroll (i.e. if the table is narrower than 768px)...
#media(max-width:767px){
.table-responsive{overflow-x:scroll;}
}
Another thing you could do is to use a pseudo element.
.<classname>:before {
padding: 2px 5px;
content: "Swipe left to read more";
color: #fff;
background: #333;
}
I want to make ajax Calander control in bigger size by overriding the style of default ajax Calender.
It should be work in larger view. I tried but its not working well when I tried to select month/year view..
Here I attached screenshot what exactly I want to do with ajax calender control.
Will it possible to make it larger view for iPad website?
OR Suggest me good calender control for Ipad website, I want to use asp.net website.
Thanks
abhishek
i have just been through this myself. there are a 3 things you need to do.
First - add a css class to your control. But beware if you do this it wipes the existing class of ajax__calendar and so most of its existing styling so add to the CalendarExtender
CssClass="ajax__calendar bigcal"
where bigcal is your new class.
Second - add your css for the styling using the bigcal class - e.g.
.bigcal .ajax__calendar_container { width: 220px; font-size:14px;}
.bigcal .ajax__calendar .ajax__calendar_container {border: 3px solid #646464;}
.bigcal .ajax__calendar_days, .bigcal .ajax__calendar_months, .bigcal .ajax__calendar_years, .bigcal .ajax__calendar_body
{width:220px;height:200px}
.bigcal .ajax__calendar_month, .bigcal .ajax__calendar_year{height:55px;padding-top:4px}
.bigcal .ajax__calendar_container table, .bigcal .ajax__calendar_container TD {font-size:14px}
.bigcal .ajax__calendar_days td div{padding:4px 5px 4px 4px}
Notice i have reset the size of it to 220 wide and 200 high - adjust accordingly
Third - you need to change the size of it in the javascript, cos it defaults to a set size for the scrolling etc to work. so
Add the following to the CalendarExtender
OnClientShown="setBigCal"
and then the following js function
function setBigCal(sender, e) {
sender._height = 200;
sender._width = 220;
}
HTH :)
EDIT - Sorry - just seen the date on this question so i assume you are already sorted. But I will leave the answer up incase anyone else gets the same issue.
i know my answer is late. i know you are asking about ajax calender. but it may help others. several programmers ask how to format asp.net calender. You can format asp.net calendar using following styles:
.calander {
background-color: whitesmoke;
border: 1px solid;
height: 305px;
width: 280px;
}
.calander table tr td {
padding: 10px;
}
.calander table tr td:hover {
background-color:rgb(200, 255, 0);
}
.ajax__calendar_today {
background-color: rgb(209, 233, 255) !important;
border-radius: 3px;
}
.ajax__calendar_footer {
background-color: rgb(209, 233, 255) !important;
width: 100% !important;
margin: 0px !important;
padding: 0px !important;
position: relative !important;
height: auto !important;
}
.ajax__calendar_active {
background-color: rgb(200, 255, 0) !important;
border-radius: 3px;
}
.ajax__calendar_day {
height: 20px !important;
width: 20px !important;
padding: 0px;
text-align: center;
margin-top: -8px;
margin-left: -5px;
}
.ajax__calendar_body {
width: 270px !important;
height: 245px !important;
}
.ajax__calendar_container {
width: auto !important;
}
these styles can be customized any way you want.
I am new to pseudo-elements that are prefixed with a double colon. I came across a blog article discussing styling of scrollbars using some webkit only css. Can the pseudo-element CSS be applied to individual elements?
/* This works by applying style to all scroll bars in window */
::-webkit-scrollbar {
width: 12px;
}
/* This does not apply the scrollbar to anything */
div ::-webkit-scrollbar {
width: 12px;
}
In this fiddle, I would like to make the div's scrollbar customized, but the main window's scrollbar stay at the default.
http://jsfiddle.net/mrtsherman/4xMUB/1/
Your idea was correct. However, the notation div ::-webkit-scrollbar with a space after div is actually the same as div *::-webkit-scrollbar; this selector means "scrollbar of any element inside <div>". Use div::-webkit-scrollbar.
See demo at http://jsfiddle.net/4xMUB/2/
I want to use a class selector for using a custom scrollbar.
Somehow .foo::-webkit doesn't work, but I figured out that div.foo::-webkit does work! Those ##$$*## pseudo-things....
See http://jsfiddle.net/QcqBM/16/
You can also apply these rules by id of the element. Let's say scroll bar of a div has to be styled which has an id "myDivId". Then you can do following. This way you can use different styles for scroll bars of different elements.
#myDivId::-webkit-scrollbar {
width: 12px;
}
#myDivId::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
#myDivId::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
http://jsfiddle.net/QcqBM/516/
You can have a scss file and apply the style to a class there
style.scss
.myscrollbar {
::-webkit-scrollbar {
width: 13px;
height: 13px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(13deg, #f9d4ff 14%, #c7ceff 64%);
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(13deg, #c7ceff 14%, #f9d4ff 64%);
}
::-webkit-scrollbar-track {
background: #ffffff;
border-radius: 10px;
box-shadow: inset 7px 10px 12px #f0f0f0;
}
}
home.html
<div class="myscrollbar">
put your contents here
</div>
I used the scrollbar generator here: https://w3generator.com/scrollbar