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

ui-select angularjs

Question

Tengo problemas para que funcione 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 los docs . Es demasiado estrecho para ser utilizado.

Gracias.

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

Parece que es el comportamiento de select2 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 toma los parámetros de configuración.

Answer 1

Con> 4.0 de select2 estoy usando

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

Estos otros no funcionaron:

• dropdownCssClass: ''bigdrop''
• ancho: ''100%''
• ancho: ''resolver''

Answer 2

El uso de Select2Gem y la lista desplegable muestran pero puedes configurar tu propio msg en estos menús desplegables.

<script type="text/javascript"> $(''.message_template'').select2({language: {noResults: function (params) {return "対象データが存在しません。";}}});
</script>

Answer 3

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

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

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

Answer 4

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

Comenzando con 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 por defecto. Cambia el tamaño dinámicamente a medida que el usuario realiza selecciones, agrega ancho para allowClear si se usa ese atributo, y maneja correctamente el marcador de posición.

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

Answer 5

Establecer ancho para ''resolver'' no funcionó para mí. En cambio, 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"

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

Answer 6

Necesita especificar el ancho del atributo a resolver para preservar el ancho del elemento

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

Answer 7

agrega el método container css en tu 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 8

select2 V4.0.3

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