jQuery UI selectmenu, yüzde olarak genişlikleri kabul etmiyor

Seçime yüzde cinsinden bir genişlik atadıysam (ör:% 100), jQuery UI eşdeğer genişliği piksel olarak hesaplar ve selectmenu widget'ına atar. Ancak, bu, ekranı yeniden boyutlandırırken sorunlara neden olur. Bu hatayı düzeltmenin bir yolu var mı?jQuery UI selectmenu, yüzde olarak genişlikleri kabul etmiyor

JSFiddle

HTML:

<form action="#"> 

    <fieldset> 
    <label for="speed">Select a speed</label> 
    <select name="speed" id="speed"> 
     <option>Slower</option> 
     <option>Slow</option> 
     <option selected="selected">Medium</option> 
     <option>Fast</option> 
     <option>Faster</option> 
    </select> 
    </fieldset> 

</form> 

</div>

CSS:

body{font-family:arial} 

fieldset { 
    border: 0; 
} 
label { 
    display: block; 
    margin-bottom: 10px; 
} 
select { 
    width: 100%; 
}

JavaScript:

$(function() { 
    $("#speed").selectmenu(); 
    });

kaynak

2016-03-26 user2472523

NB gibi jQuery UI stili geçersiz kılmak için: Ben de yaşıyorum ilgili bir hata Ne yazık ki JSFiddle içinde plicate): Ben bir seçime ve% 100 bir yüzdesine% 100 atamak UI yerine 100px bir genişlik verir. % 88 gibi başka bir yüzde koymaya çalıştım ve aynı şey olur (88px). – user2472523

https://jsfiddle.net/arunpjohny/cprw123d/1/? - biraz pahalı (widget'ı imha etme ve yeniden oluşturma) ancak ihtiyacınız olanı yapar, widget boyutları hesaplar ve satır içi genişliğini ayarlar –

th doğrulamak için öğeyi kontrol atanan e jquery UI iD. Belirli menüler için genellikle #[element]-button olur. Daha sonra CSS'yi bu ID'ye uygulayın. Updated Fiddle

Ayrıca oluşturulan genel jquery UI sınıfları hedefleyebilir: Bu durumda

#speed-button { 
     width: 100% !important; 
    }

sorunu gidermek gibi görünüyor. Ben sadece 1 veya 2 eleman ile dealign iseniz, ID aynı şeyi yapacak zaman ayırmak için zaman alıcı bulmak için buluyorum.

kaynak

2016-03-26 04:00:05 Scott

bu deneyin:

.ui-selectmenu-button{width:100%}

JSFiddle: https://jsfiddle.net/yzzxvbuw/11/

kaynak

2016-03-26 04:00:32 satya

bir çözüm

$(function() { 
 
    $("#speed").selectmenu(); 
 
});

body { 
 
    font-family: arial 
 
} 
 
fieldset { 
 
    border: 0; 
 
} 
 
label { 
 
    display: block; 
 
    margin-bottom: 10px; 
 
} 
 
select { 
 
    width: 100%; 
 
} 
 
#speed + .ui-selectmenu-button { 
 
    width: 100% !important; 
 
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
<div class="demo"> 
 

 
    <form action="#"> 
 

 
    <fieldset> 
 
     <label for="speed">Select a speed</label> 
 
     <select name="speed" id="speed"> 
 
     <option>Slower</option> 
 
     <option>Slow</option> 
 
     <option selected="selected">Medium</option> 
 
     <option>Fast</option> 
 
     <option>Faster</option> 
 
     </select> 
 

 

 
    </fieldset> 
 

 
    </form> 
 

 
</div>

kaynak

2016-03-26 04:01:12

https://jsfiddle.net/arunpjohny/cprw123d/2/ –

jQuery UI selectmenu, yüzde olarak genişlikleri kabul etmiyor

cevap

İlgili konular