È possibile utilizzare una casella di selezione di dimensioni diverse (larghezza) con uniforme (plugin jquery)?

Question

Desidero utilizzare più caselle di selezione con larghezza multipla uniforme. Il problema è quando lo faccio

$('#small').uniform({selectClass:'smallSelect'}); 

$('#big').uniform({selectClass:'bigSelect'}); 

<select id="small"> 
<option>test</option> 
</select> 

<select id="big"> 
<option>test2</option> 
</select> 

Solo il primo viene applicato e bigSelect viene ignorato.

Answer 1

È possibile modificare la larghezza di ogni elemento di selezione prendendo di mira l'intervallo generato direttamente. Il codice crea un wrapper div con un ID univoco di uniform-yourid e child span element con l'opzione attualmente selezionata. di seguito è il css per i tuoi id specificati e puoi aggiungere.

<style type="text/css"> 
#uniform-small span 
{ 
    width:100px; 
    text-align:center; 
} 
#uniform-big span 
{ 
    width:200px; 
    text-align:center; 
} 
</style> 

Answer 2

uniform.default.css utilizza immagine sprite.png per i temi.

In questa immagine viene definita la larghezza del controllo. Quindi non puoi cambiarli come requisito.

Answer 3

@evanmcd, ho avuto lo stesso problema come voi e ho scoperto che se si imposta la selectAutoWidth-false ci vorrà la classe CSS in considerazione.

$('select').uniform({selectAutoWidth: false}); 

e poi nel css si definisce uno stile per .selector, che è la cass predefinito per il div che contiene il select stesso.