jQuery UI-Auswahlmenü akzeptiert keine Breiten in Prozent

Question

Wenn ich einer Auswahl eine Breite in Prozent zuweise (z. B. 100%), berechnet jQuery UI die äquivalente Breite in Pixel und weist sie dem Auswahlmenü-Widget zu. Dies führt jedoch zu Problemen bei der Größenänderung des Bildschirms. Gibt es eine Möglichkeit, diesen Fehler zu beheben?

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(); 
    }); 

Answer 1

das Element Inspizieren th zu überprüfen e jquery UI ID, die zugewiesen ist. Es ist oft #[element]-button für ausgewählte Menüs.

Dann wenden Sie das CSS auf diese ID an. In diesem Fall

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

scheint das Problem zu beheben: Updated Fiddle

Sie auch die allgemeinen jquery UI-Klassen zielen könnte, die erstellt werden. Ich finde nur diejenigen, die zeitaufwendig zu sortieren, wenn die ID das gleiche tun wird, wenn Sie nur mit 1 oder 2 Elemente beschäftigen.

Answer 2

Bitte versuchen Sie dies:

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

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

Answer 3

Eine Lösung ist die jQuery UI-Stil wie

$(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>