chosen select bootstrap shows twice in bootstrap modal

Question

Bootstrap Select-box shows multiple times in bootstrap modal wizard. how to fix that? the image is shown below:

i have tried many things from stack questions but no use.

My html/php part is below:

<div class="wizard" id="satellite-wizard" data-title="Create Server"> <div class="wizard-card wizard-card-overlay" data-cardname="location"> <div class="wizard-input-section"> <select name="location" data-placeholder="Monitor nodes" style="width:350px;" class="chzn-select"> <option value=""></option> <option>Atlanta</option> <option selected>Chicago</option> <option>Dallas</option> </select> </div> </div> </div>

JS Code

 $(document).ready(function() { $.fn.wizard.logging = true; var wizard = $('#satellite-wizard').wizard({ keyboard : false, contentHeight : 400, contentWidth : 700, backdrop: 'static' }); $(".chzn-select").chosen(); wizard.on('closed', function() { wizard.reset(); }); $('#open-wizard').click(function(e) { e.preventDefault(); wizard.show(); }); });

That's a lot of JS code of which likely most is not relevant to the issue. Try removing parts of it successively, and see when/if the problem goes away, to narrow it down more. — C3roe
– C3roe, Commented Nov 30, 2016 at 20:14
Curious why you have a static width set to the chosen.js element? "style="width:350px;". Have you tried removing this and seeing if the doubling still happens? — Nathaniel Flick
– Nathaniel Flick, Commented Nov 30, 2016 at 20:43
@NathanielFlick after removing this it goes completely wrong. — Fahad Almehaini
– Fahad Almehaini, Commented Nov 30, 2016 at 20:52

TrojanName · Accepted Answer · 2022-03-03 15:21:03Z

When Bootstrap Select gets applied it actually creates a copy of your select and hides the original. If you are seeing 2 of your selects it's because the hide process failed. The usual trick to resolve this is to add this line (usually in the done callback of the Ajax request that populates the select)

$('.selectpicker').selectpicker('refresh')

Collectives™ on Stack Overflow

chosen select bootstrap shows twice in bootstrap modal

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related