How to fix 'Chosen with bootstrap not working properly'
By FoxLearn 1/2/2025 6:53:54 AM 318
To fix an issue where Chosen (a jQuery plugin for enhancing <select> elements) is not working properly with Bootstrap, there are a few common problems and solutions to check.
Initialize Chosen Properly
After including the libraries, make sure you are initializing Chosen correctly.
You can initialize Chosen on your <select>
elements like this:
<script type="text/javascript"> $(document).ajaxComplete(function () { $('.chosen-select').chosen({ allow_single_deselect: true, width: "100%" }); }); </script>
Ensure your <select>
has the correct class:
<select class="chosen-select"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> </select>
Do the same way, you can solve chosen plugin displaying in bootstrap modal not working when using PartialView in ASP.NET MVC.
You can also initialize to pass options with "width" property like in this, or any other width value.
$("select").chosen({width: "inherit"})
or
$('.chosen-container').css({ 'width':'350px' });
I hope so you can fix chosen dropdown not working in bootstrap Model.
Categories
Popular Posts
Stisla Admin Dashboard Template
11/18/2024
Admin Tailwind CSS Admin Dashboard Template
11/18/2024
Portal HTML Bootstrap
11/14/2024