Cuando un Elegido desplegable que está dentro de un Bootstrap 3 acordeón que oculto inicialmente, entonces el ancho de la lista desplegable está cerca de cero. Después de su expansión se parece a esto:

La anchura de las listas desplegables cerca de cero al iniciar en derrumbó Bootstrap acordeón

Mientras que espero que se parezca a esto:

La anchura de las listas desplegables cerca de cero al iniciar en derrumbó Bootstrap acordeón

El problema se produce cuando el panel-collapse collapse div no tiene un in clase,indicando efectivamente, es un principio se derrumbó. Aquí está el código para reproducir este problema:

JS:

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

CSS:

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

HTML:

<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>

¿Qué puedo hacer para evitar que esto suceda? Llamar elegido como .chosen({width: '90%'});, es decir, con una rígida ancho funciona, pero no es satisfactoria (quiero estilo en mi hoja de estilos o usando Bootstrap). La única solución a la izquierda parece ser el gancho en la expansión del evento y la fuerza de un elegido de actualización, pero que también se siente como una solución.

Preferiblemente me gustaría tener una línea de CSS para solucionar este problema, o saber si esto podría ser incluso un error en el (combinación de) herramienta(s)?

InformationsquelleAutor Jeroen | 2014-09-22

6 Comentarios

  1. 29

    Razón:

    Elegido calcula y asigna el ancho cuando el DOM esté listo, antes de que el ancho inicial de la emulado desplegable es cero.

    Solución:

    Agregar lo siguiente a tu CSS para el menú desplegable tiene un ancho inicial:

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

    La !important parte es porque escogido añade un estilo en línea de width: 0; para el elemento en sí y que es necesario reemplazar la especificidad con !important.

    • Gracias. Que no parece funcionar. La vergüenza se necesita un !important modificador (estremecimiento!) pero dado que la elegida establece el ancho como un elemento de estilo, supongo que sería necesaria.
    • El !parte importante es elegido porque añade un estilo en línea de ancho: 0 para el elemento en sí y que es necesario reemplazar la especificidad con !importante.
    • o .elegido-contenedor.elegido-contenedor-multi { width: 135px !importante; /* o cualquier valor que se adapte a sus necesidades */ } que encajaba con mi caso
  2. 15

    De jquery-elegido la documentación oficial:

    El ancho de la caja de selección. De forma predeterminada, Elegido intenta
    que coincida con el ancho de la caja de selección que se va a reemplazar. Si el select es
    oculto Elegido cuando se crea una instancia, debe especificar un ancho o el
    seleccione se mostrará con un ancho de 0.

    Por lo que necesita para especificar width atributo

    JS:

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

    CSS:

    .panel-heading { cursor: pointer; }

    HTML:

    <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>

    EDITAR:

    También como un hack usted puede comprobar visible selectbox ancho y aplicarlo a todos los demás:

    $(document).ready(function() {
        $('select').chosen( { width: $( '.panel-collapse.collapse.in select' ).eq( 0 ).width() + 'px' } );
    });
    • Con la esperanza, no tengo un duro ancho, pero +1 para proporcionar una solución basada en la documentación. La culpa es mía por no comprobar que :-). En cualquier caso, gracias por tomarse el tiempo para responder.
    • ver mi respuesta actualizada
  3. 4

    Funciona si no

    $('.my-element').chosen({width:"auto"});
    • esto no parece funcionar en el escenario, cuando el elemento está oculto en el tiempo.
  4. 3

    De esta manera le darás a cada uno seleccione su tamaño inicial:

    $('select').each(function(){
    
        $(this).chosen({ width: $(this).eq( 0 ).width() + 'px' });
    
    })
    • esto funciona perfecto !!!
  5. 1

    Si la selección está dentro de un formulario oculto, la anchura todavía es 0. Aquí está mi solución para él:

      $(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;
        }
      }
  6. 0

    Puede llamar al seleccionar en el show del acordeón en la que se establece la altura exacta.

    JS:

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

    CSS:

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

    HTML:

    <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>

    • +1 para una solución alternativa. Estoy un poco perplejo, aunque de por qué funciona, porque el "#accordian" (con una «a») selector de no coincidir id="accordion" (con una «o»), ¿debería?
    • Yo también comprobado y no estoy seguro de cómo funcionaba 🙁

Dejar respuesta

Please enter your comment!
Please enter your name here