<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css" type="text/css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
I have applied these two links for the multi-select drop-down in my webform. It works fine but while I have selected more category it overlaps the select input box. How can I fix it?
Multiselect CSS code:
.multiselect .btn-group{ display: block; border: 1px solid #ccc; height: 45px; } .multiselect .btn-group .btn{ padding:14px 15px; }
HTML:
<div class="col-md-4"> <div class="form-group multiselect"> <label for="inputWebSite">Category :</label> <select name="category_id[]" id="category_id" class="form-control" placeholder="Select Category" multiple="multiple"> <option value="1">Category 1</option> <option value="2">Category 2</option> <option value="3">Category 3</option> </select> </div> </div>
JS:
$('#category_id').multiselect({});
Question and answer is powered by AnsPress.io