How to fix 'Chosen with bootstrap not working properly'
By Tan Lee Published on Feb 16, 2024 429
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
Portal HTML Bootstrap
Nov 13, 2024
Freedash bootstrap lite
Nov 13, 2024
11 Things You Didn't Know About Cloudflare
Dec 19, 2024
How to disable Windows Defender SmartScreen
Dec 24, 2024