establecer el ancho de la entrada select2 (a través de la directiva Angular-ui)

Question

Tengo problemas para hacer funcionar este plunkr (select2 + angulat-ui).

http://plnkr.co/edit/NkdWUO?p=preview

En la configuración local, obtengo el trabajo select2, pero no puedo establecer el ancho como se describe en la documentos.Es demasiado estrecho para usarlo.

Gracias.

EDITAR:No importa ese plnkr, encontré un violín que funciona aquí.http://jsfiddle.net/pEFy6/

Parece que el comportamiento de select2 es colapsar al ancho del primer elemento.Podría establecer el ancho mediante bootstrap. class="input-medium" .Aún no estoy seguro de por qué angular-ui no acepta parámetros de configuración.

Answer 1

Debe especificar el ancho del atributo a resolver para preservar el ancho del elemento.

$(document).ready(function() { 
    $("#myselect").select2({ width: 'resolve' });           
});

Answer 2

En mi caso, el select2 se abriría correctamente si hubiera cero o más pastillas.

Pero si hubiera una o más pastillas y las borrara todas, se reduciría al ancho más pequeño.Mi solución fue simplemente:

$("#myselect").select2({ width: '100%' });      

Answer 3

Esta es una vieja pregunta, pero aún vale la pena publicar nueva información...

A partir de Select2 versión 3.4.0 hay un atributo dropdownAutoWidth que resuelve el problema y maneja todos los casos impares.Tenga en cuenta que no está activado de forma predeterminada.Cambia de tamaño dinámicamente a medida que el usuario realiza selecciones, agrega ancho para allowClear si se utiliza ese atributo, y también maneja correctamente el texto del marcador de posición.

$("#some_select_id").select2({
    dropdownAutoWidth : true
});

Answer 4

seleccione2 V4.0.3

<select class="smartsearch" name="search" id="search" style="width:100%;"></select>

Answer 5

Con > 4.0 de select2 estoy usando

$("select").select2({
  dropdownAutoWidth: true
});

Estos otros no funcionaron:

• desplegableCssClass:'Gran caída'
• ancho:'100%'
• ancho:'resolver'

Answer 6

agregue el contenedor de métodos css en su script de esta manera:

$("#your_select_id").select2({
      containerCss : {"display":"block"}
});

establecerá el ancho de su selección igual que el ancho de su div.

Answer 7

Establecer el ancho en 'resolver' no funcionó para mí.En su lugar, agregué "ancho: 100%" a mi selección y modifiqué el CSS de esta manera:

.select2-offscreen {position: fixed !important;}

Esta fue la única solución que funcionó para mí (mi versión es 2.2.1) Su selección tomará todo el lugar disponible, es mejor que usar

class="input-medium"

desde bootstrap, porque la selección siempre permanece en el contenedor, incluso después de cambiar el tamaño de la ventana (sensible)

Answer 8

Puedes intentarlo así.Esto funciona para mi

$("#MISSION_ID").select2();

En la solicitud de ocultar/mostrar o ajax, tenemos que reinicializar el complemento select2

Por ejemplo:

$("#offialNumberArea").show();
$("#eventNameArea").hide();

$('.selectCriteria').change(function(){
    var thisVal = $(this).val();
    if(thisVal == 'sailor'){
        $("#offialNumberArea").show();
        $("#eventNameArea").hide();
    }
    else
    {
        $("#offialNumberArea").hide();
        $("#eventNameArea").show();
        $("#MISSION_ID").select2();
    }
});

Answer 9

Solución CSS más sencilla independiente de select2

//HTML
<select id="" class="input-xlg">
</select>
<input type="text" id="" name="" value="" class="input-lg" />

//CSS
.input-xxsm {
  width: 40px!important; //for 2 digits 
}

.input-xsm {
  width: 60px!important; //for 4 digits 
}

.input-sm {
  width: 100px!important; //for short options   
}

.input-md {
  width: 160px!important; //for medium long options 
}

.input-lg {
  width: 220px!important; //for long options    
}

.input-xlg {
  width: 300px!important; //for very long options   
}

.input-xxlg {
  width: 100%!important; //100% of parent   
}

Answer 10

Agregue la opción de resolución de ancho a su función select2

$(document).ready(function() { 
        $("#myselect").select2({ width: 'resolve' });           
});

Después de agregar el siguiente CSS a su hoja de estilo

.select2-container {
width: 100% !important;
}

solucionará el problema

Answer 11

En un proyecto reciente construido usando Arranque 4, Probé todos los métodos anteriores pero nada funcionó.Mi enfoque fue editar el biblioteca CSS usando jQuery Llegar 100% en la mesa.

 // * Select2 4.0.7

$('.select2-multiple').select2({
    // theme: 'bootstrap4', //Doesn't work
    // width:'100%', //Doesn't work
    width: 'resolve'
});

//The Fix
$('.select2-w-100').parent().find('span')
    .removeClass('select2-container')
    .css("width", "100%")
    .css("flex-grow", "1")
    .css("box-sizing", "border-box")
    .css("display", "inline-block")
    .css("margin", "0")
    .css("position", "relative")
    .css("vertical-align", "middle")

Laboral Manifestación

$('.select2-multiple').select2({
        // theme: 'bootstrap4', //Doesn't work
        // width:'100%',//Doens't work
        width: 'resolve'
    });
    //Fix the above style width:100%
    $('.select2-w-100').parent().find('span')
        .removeClass('select2-container')
        .css("width", "100%")
        .css("flex-grow", "1")
        .css("box-sizing", "border-box")
        .css("display", "inline-block")
        .css("margin", "0")
        .css("position", "relative")
        .css("vertical-align", "middle")

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col" class="w-50">#</th>
            <th scope="col" class="w-50">Trade Zones</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>
                1
            </td>
            <td>
                <select class="form-control select2-multiple select2-w-100" name="sellingFees[]"
                        multiple="multiple">
                    <option value="1">One</option>
                    <option value="1">Two</option>
                    <option value="1">Three</option>
                    <option value="1">Okay</option>
                </select>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>