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="+Sans+Condensed:300"rel="stylesheet">
<script type="text/javascript" src=".8.3/jquery.min.js"></script>
<link href=".0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src=".0.3/js/bootstrap.min.js"></script>
<link href=".css" rel="stylesheet" type="text/css" />
<script src=".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>
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./css?family=Open+Sans+Condensed:300"rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="http://cdn.rawgit./davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit./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>
- What are you trying to achieve exactly, I mean as long as you set the size lower than the options cnt, then the selectbox will have a vertical scroll – FrankCamara Commented May 31, 2017 at 13:54
- I am trying to limit number of options to be shown to 5, after that user must be allowed to scroll down to find the others. – Nayan Patel Commented May 31, 2017 at 15:49
2 Answers
Reset to default 3You 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./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis./css?family=Open+Sans+Condensed:300" rel="stylesheet">
<script type="text/javascript" src="http://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link href="https://cdn.rawgit./davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.rawgit./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>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!
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744923881a4601307.html
评论列表（0条）