using Select2, i need to add a checkbox to left of each option. i also have the options grouped using optgroup. however, a checkbox is appearing on a blank line before the group. i lifted code from a couple of postings and was able to hide the checkbox to left of the group but i cant figure out how to remove the blank line before the group. attached blank line before the group is the picture of what i am encountering and following is my code thanks in advance.
$(".js-select2").select2({
closeOnSelect : false,
placeholder : "Placeholder",
allowHtml: true,
allowClear: true,
tags: true
});body {
font-family: 'Ubuntu', sans-serif;
font-weight: bold;
}
.select2-container {
min-width: 400px;
}
.select2-results__option {
padding-right: 20px;
vertical-align: middle;
}
.select2-results__option:before {
content: "";
display: inline-block;
position: relative;
height: 20px;
width: 20px;
border: 2px solid #e9e9e9;
border-radius: 4px;
background-color: #fff;
margin-right: 20px;
vertical-align: middle;
}
.select2-results__option[aria-selected=true]:before {
font-family:fontAwesome;
content: "\f00c";
color: #fff;
background-color: #f77750;
border: 0;
display: inline-block;
padding-left: 3px;
}
.select2-container--default .select2-results__option[aria-selected=true] {
background-color: #fff;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #eaeaeb;
color: #272727;
}
.select2-container--default .select2-selection--multiple {
margin-bottom: 10px;
}
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
border-radius: 4px;
}
.select2-container--default.select2-container--focus .select2-selection--multiple {
border-color: #f77750;
border-width: 2px;
}
.select2-container--default .select2-selection--multiple {
border-width: 2px;
}
.select2-container--open .select2-dropdown--below {
border-radius: 6px;
box-shadow: 0 0 10px rgba(0,0,0,0.5);
}
.select2-selection .select2-selection--multiple:after {
content: 'hhghgh';
}
.select2-results__group:before {
content: "";
display: none;
}<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/css/select2.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.4/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<h4>checkbox</h4>
<select class="js-select2" multiple="multiple">
<optgroup label="Group1" class="GROUP">
<option value="O1" data-badge="">Option1</option>
<option value="O2" data-badge="">Option2</option>
<option value="O3" data-badge="">Option3</option>
</optgroup>
<optgroup label="Group2">
<option value="O4" data-badge="">Option4</option>
<option value="O5" data-badge="">Option5</option>
<option value="O6" data-badge="">Option6</option>
</optgroup>
</select>
</div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire