Twitter Bootstrap Question posted in

How to add a vertical scroll bar in multiple select box with checkbox, size attribute not working – Twitter bootstrap

How to add a vertical scroll bar in multiple select box with checkbox, as i have a long list of options, and there is no scroll bars, i tried with the size attribute but it didnt work.
Below is my code, please help me to add a scroll bar-

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <title>check box</title>

    <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300"rel="stylesheet">
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
    <link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
    <script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $('.ruleparameter').multiselect({
                includeSelectAllOption : true
            });
            $('#btnSelected').click(function() {
                var selected = $(".ruleparameter option:selected");
                var message = "";
                selected.each(function() {
                    message += $(this).text() + " " + $(this).val() + "n";
                });
                alert(message);
            });
        });
    </script>
    </head>
    <body>
        <select class="ruleparameter" size="5" multiple name="HIGHEST_RCP_RP">
            <option>SD</option>
            <option>SDPVR</option>
            <option>HD</option>
            <option>WLHD</option>
            <option>HDPVR</option>
            <option>SD</option>
            <option>SDPVR</option>
            <option>HD</option>
            <option>WLHD</option>
            <option>HDPVR</option>
        </select>
    </body>
    </html>
Tags:

2

Answers


  1. 0

    Frank is correct that a vertical scroll should be there… actually by default, if there is too much content for the div’s size. Mac OSX Lion is an exception. I know that overflow is hidden by default.

    Anyway, you can also insure that there is a scroll bar by placing the following code in your CSS file:

    section.ruleparameter {
    overflow-y: scroll;
}

    If your content is indeed clipping at the bottom, then that should take care of the problem. If it doesn’t, then the issue is definitely elsewhere.

    I hope that helps and post your results!

    Login or Signup to reply.
  2. 0

    You need to add a max-height to options container and add overflow:auto;

    .multiselect-container{

  max-height:200px;
  overflow:auto;
}

    See code snippet:

    $(function() {
  $('.ruleparameter').multiselect({
    includeSelectAllOption: true
  });
  $('#btnSelected').click(function() {
    var selected = $(".ruleparameter option:selected");
    var message = "";
    selected.each(function() {
      message += $(this).text() + " " + $(this).val() + "n";
    });
    alert(message);
  });
});
    .multiselect-container{

  max-height:200px;
  overflow:auto;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" type="text/javascript"></script>

<select class="ruleparameter" size="5" multiple name="HIGHEST_RCP_RP">
            <option>SD</option>
            <option>SDPVR</option>
            <option>HD</option>
            <option>WLHD</option>
            <option>HDPVR</option>
            <option>SD</option>
            <option>SDPVR</option>
            <option>HD</option>
            <option>WLHD</option>
            <option>HDPVR</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search