How to set the width of mCustomScrollbar using CSS

Question

I am trying to increase the width of the scroll bar by setting width of .mCSB_dragger as described in the documentation. But the scrollbar width remains as is.

$('#container1').mCustomScrollbar({ 
        theme:"dark-3"        
});

$(document).on('click', '.participants li', function(e){
  
});

#container1 {
    height:200px;
    width:100px;
    padding:5px;
    border:1px solid black;
}

 .mCSB_dragger{
    width:25px;
 }

<link rel="stylesheet" href="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<div id="container1">
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <p>6</p>
  <p>6</p>
</div>

Here is the code:

score 2 · Accepted Answer · answered Oct 04 '18 at 08:51

2

Try this one, I think it needs to be override but overriding is not a good practice. I hope this helps

.mCSB_dragger_bar{
    width:13px!important;
 }

and if you want the scroll knob to also adjust its width you may also override

.mCSB_draggerRail{
    width:13px!important;
}

answered Oct 04 '18 at 08:51

セアンデエ

214
2
11

Avoid using `!important`. It disables javascript relying on inline `style`. In principle, it's better to use `selector:not(#_)` instead, to artificially inflate specificity. When needing selectors stronger than 1 × `id`, `:not(#_):not(#_)` also works. So, in case above, `.mCSB_dragger_bar:not(#_)` would avoid using `!important`. – tao Oct 04 '18 at 09:22
1

@AndreiGheorghiu, yes, as you can see I have stated above that its not a good practice to override using !important. – セアンデエ Oct 04 '18 at 09:24

ElusiveCoder · Answer 2 · 2018-10-04T08:53:09.107

0

Add below css and you're all set... Check now...

.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
    width: 10px !important;
}

Note: Change width as per your requirement.

edited Oct 04 '18 at 08:53

answered Oct 04 '18 at 08:47

ElusiveCoder

1,593
1
8
23

It does not work, tried updating your css on question snippet does not change anything/ – Simsons Oct 04 '18 at 08:51

score 0 · Answer 3 · answered Oct 04 '18 at 09:01

0

Add the Below styles to your stylesheet

.mCS-dark-3.mCSB_scrollTools .mCSB_draggerRail{
    width:15px !important;
}


.mCS-dark-3.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    width:15px !important;
}

answered Oct 04 '18 at 09:01

Pradeep Bommana

1
1

How to set the width of mCustomScrollbar using CSS

3 Answers3