Larghezza di Chosen dropdowns vicino zero quando iniziano a collassato Bootstrap fisarmonica

Question

Quando una discesa scelto è all'interno di una fisarmonica 3 Bootstrap che è inizialmente nascosto, poi la larghezza della discesa è vicino a zero. Dopo l'espansione sembra che questo:

Mentre mi aspetto che questo aspetto:

Il problema si verifica quando il panel-collapse collapsediv non ha una classe in, in modo efficace che indica inizialmente è crollato. Ecco il codice per riprodurre questo problema:

$(document).ready(function() { 
 
    $('select').chosen(); 
 
});

.panel-heading { cursor: pointer; } 
 
body { padding: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
      Expand me to show the issue! 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This select has a near-width zero:</p> 
 
     <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
     <h4 class="panel-title"> 
 
      Already expanded/how it <em>should</em> be 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse in"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This panel is initially visible and <em>does</em> have correct width for the select box:</p> 
 
      <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Cosa posso fare per evitare che ciò accada? La chiamata scelta come .chosen({width: '90%'});, vale a dire con una larghezza codificata funziona, ma non è soddisfacente (voglio stile nel mio foglio di stile o utilizzando Bootstrap). L'unica soluzione rimasta sembra essere quella di agganciare l'evento in espansione e forzare un aggiornamento scelto, ma anche questo sembra una soluzione alternativa.

Preferibilmente avrei una riga di CSS per risolvere questo problema, o sapere se questo potrebbe anche essere un bug nel (combinazione di) strumento (s)?

Answer 1

Motivo:

calcola scelti e assegna la larghezza quando il DOM è pronto, prima che la larghezza iniziale per la discesa emulato è zero.

Soluzione:

Aggiungere quanto segue al vostro CSS in modo che il menu a discesa ha una larghezza iniziale:

.chosen-container.chosen-container-single { 
    width: 300px !important; /* or any value that fits your needs */ 
} 

La parte !important è perché scelto aggiunge uno stile in linea di width: 0; all'elemento stesso e è necessario ignorare la specificità con !important.

Answer 2

Da jquery-chosen documentazione ufficiale:

La larghezza della casella di selezione prescelta. Per impostazione predefinita, Prescelti tenta di corrispondere alla larghezza della casella di selezione che si sta sostituendo. Se la tua selezione è nascosta quando viene selezionata l'opzione Scelto, devi specificare una larghezza oppure la selezione verrà visualizzata con una larghezza pari a 0.

Quindi, è necessario specificare width attributo

$(document).ready(function() { 
 
    $('select').chosen({ width: '100%' }); 
 
});

.panel-heading { cursor: pointer; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
      Expand me to show the issue! 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This select has a near-width zero:</p> 
 
     <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
     <h4 class="panel-title"> 
 
      Already expanded/how it <em>should</em> be 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse in"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This panel is initially visible and <em>does</em> have correct width for the select box:</p> 
 
      <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

EDIT:

anche come un hack è possibile controllare la larghezza selectbox visibile e applicarlo a tutti gli altri:

$(document).ready(function() { 
    $('select').chosen({ width: $('.panel-collapse.collapse.in select').eq(0).width() + 'px' }); 
}); 

Answer 3

È possibile chiamare la selezione in mostra del fisarmonica che imposta l'altezza esatta.

$(document).ready(function() { 
 
    $("#accordion").on("show",function(){ 
 
     $('select').chosen(); 
 
    })   
 
});

.panel-heading { cursor: pointer; } 
 
body { padding: 10px; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
 
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.min.js"></script> 
 

 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
 
      Expand me to show the issue! 
 
     </h4> 
 
    </div> 
 
    <div id="collapseOne" class="panel-collapse collapse"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This select has a near-width zero:</p> 
 
     <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default"> 
 
    <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
 
     <h4 class="panel-title"> 
 
      Already expanded/how it <em>should</em> be 
 
     </h4> 
 
    </div> 
 
    <div id="collapseTwo" class="panel-collapse collapse in"> 
 
     <div class="panel-body form-inline"> 
 
     <p>This panel is initially visible and <em>does</em> have correct width for the select box:</p> 
 
      <select class="form-control"> 
 
      <option>Short</option> 
 
      <option>Longer option</option> 
 
      <option>The longest option of them all</option> 
 
     </select> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 4

In questo modo darete ogni selezionare la sua dimensione iniziale:

$('select').each(function(){ 

    $(this).chosen({ width: $(this).eq(0).width() + 'px' }); 

}) 

Answer 5

se la selezione è all'interno di una forma nascosta, la larghezza è ancora 0. Ecco il mio fix per esso:

$(document).ready(function() { 
    refreshSelects(); 
    }); 

    /** 
    * Re-draws selects to fix width of 'chosen' wrapper. 
    */ 
    refreshSelects = function() { 
    $('select').each(function(){ 
     // Re-calculate width of every select wrapper. Hidden selects width is 
     // calculated as 0 by 'chosen' plugin. 
     $(this).siblings('.chosen-container').css('width', realWidth($(this))); 
    }); 

    /** 
    * Calculates real width of an element. 
    * 
    * @param {object} $element 
    * jQuery object. 
    * 
    * @returns {string} 
    * Element width string. 
    */ 
    function realWidth($element){ 
     var $clone = $element.clone(); 
     $clone.css("visibility","hidden"); 
     $('body').append($clone); 
     var width = $clone.outerWidth(); 
     $clone.remove(); 
     return width; 
    } 
    } 

Answer 6

Se funziona se si fa

$('.my-element').chosen({width:"auto"});