usando jQuery UI - ajuste de ancho en un cuadro de selección múltiple en particular

Question

estoy usando jQuery UI así:

$("#companyType").multiselect({ 
    multiple: false, 
    header: "Type", 
    noneSelectedText: "Type", 
    selectedList: 1 
}); 
$('.ui-multiselect').css('width', '100px'); 

Lo que me gustaría hacer es configurar el .ui-multiselect por sólo el div #companyType. Algo como esto:

$('#companyType.ui-multiselect').css('width', '100px'); 

¿Hay alguna manera de hacer esto? ¡Gracias!

Answer 1

Si desea establecer esa regla de CSS en particular para solo los elementos con la clase .ui-multiselect contenida en div #companyType, creo que jquery ui no tiene influencia en ella. Prueba esto:

$('#companyType .ui-multiselect').css('width', '100px'); 

Esto establecerá width = 100px a todos los elementos contenidos en #companyType que tienen una clase 'ui-multiselect'

Answer 2

no

seguro de la versión que utiliza, pero v1.5 incluye una nuevo parámetro de "clases" que puede configurar para diseñar su elemento multiselect.

un vistazo aquí sobre cómo usarlo: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/ Dice

clase adicional (es) para aplicar tanto al botón y menú para una mayor personalización . Separe las clases múltiples con un espacio. Tendrá que alcance su CSS para diferenciar entre el botón/menú:

Ejemplo

$("#companyType").multiselect({ 
classes : "myClass" 
}); 

a continuación en el uso de archivos CSS:

/* button */ 
.ui-multiselect.myClass {} 

/* menu */ 
.ui-multiselect-menu.myClass {} 

Answer 3

Otro método simple para añadir ancho para el cuadro de lista multiselección es como estos Es fácil que agregar otra clase o estilo en línea

$('#companyType .ui-multiselect').width(200); 

Esto establecerá un valor de 200 px en el cuadro de lista especificado

Answer 4

Pruebe este código con la opción minWidth. Es el ancho mínimo de todo el widget en píxeles. El ajuste en “auto” se desactivará y el valor predeterminado es: 225

$("#companyType").multiselect({ 
    multiple: false, 
    header: "Type", 
    noneSelectedText: "Type", 
    selectedList: 1 
    minWidth:100 
}); 

Answer 5

Para la referencia, si quieres un porcentaje de la anchura (por ejemplo 100%) se aplican dentro de evento de cambio de tamaño de la ventana.

$(window).resize(function() { 
    $('#companyType .ui-multiselect').css('width', '100%'); 
}); 

También puede asignar a la anchura de otro elemento de forma dinámica:

$(window).resize(function() { 
    $('#companyType .ui-multiselect').css('width', $('#anotherElement').css('width')); 
});