1

I'm trying to add a scroll to a bootstrap dropdown menu. It's a vertical scroll and the code looks like below. First I have a dropdown that works but when I add the scroll like the second dropdown everything falls apart. How do I properly add a scroll to a dropdown the correct way. I want to use the plugin in my example.

<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.concat.min.js"></script>
<link href="https://raw.githubusercontent.com/malihu/malihu-custom-scrollbar-plugin/master/jquery.mCustomScrollbar.css" rel="stylesheet"/>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
    <li><a href="#">Menu item 8</a></li>
    <li><a href="#">Menu item 9</a></li>
    <li><a href="#">Menu item 10</a></li>
  </ul>
</div>

<br>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
  <ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
    <li><a href="#">Menu item 8</a></li>
    <li><a href="#">Menu item 9</a></li>
    <li><a href="#">Menu item 10</a></li>
  </ul>
</div>

<script>
$("#myscrollid").mCustomScrollbar({
    setHeight:"100px",
    scrollbarPosition: "inside",
});
</script>

</body>
</html>
Peter Karlsson
  • 403
  • 5
  • 19

1 Answers1

-1
<!DOCTYPE html>
<html>
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="/PATH/TO/jquery.mCustomScrollbar.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="/PATH/TO/jquery.mCustomScrollbar.concat.min.js"></script>

</head>
<body>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown works <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
    <li><a href="#">Menu item 8</a></li>
    <li><a href="#">Menu item 9</a></li>
    <li><a href="#">Menu item 10</a></li>
  </ul>
</div>

<br>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown do not work <span class="caret"></span></button>
  <ul id="myscrollid" class="dropdown-menu mCustomScrollbar" data-mcs-theme="dark">
    <li><a href="#">Menu item 1</a></li>
    <li><a href="#">Menu item 2</a></li>
    <li><a href="#">Menu item 3</a></li>
    <li><a href="#">Menu item 4</a></li>
    <li><a href="#">Menu item 5</a></li>
    <li><a href="#">Menu item 6</a></li>
    <li><a href="#">Menu item 7</a></li>
    <li><a href="#">Menu item 8</a></li>
    <li><a href="#">Menu item 9</a></li>
    <li><a href="#">Menu item 10</a></li>
  </ul>
</div>

<script>
  $(document).ready(function() {
    $("#myscrollid").mCustomScrollbar({
      setHeight:"100px",
      scrollbarPosition: "inside",
    });
  });
</script>
</body>
</html>

Download the source and specify the path to your plugin. You should invoke jQuery as shown. This worked for me.

Hope this helps

Rayed
  • 1
  • 2