jQuery UI selectmenu不接受百分比寬度

如果我給百分比分配一個寬度（例如：100％），jQuery UI計算等效寬度（以像素爲單位），並將其分配給selectmenu小部件。但是，這在調整屏幕大小時會導致問題。有沒有辦法解決這個錯誤？jQuery UI selectmenu不接受百分比寬度

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

來源

2016-03-26 user2472523

注：我也有一個相關的錯誤（我無法回覆不幸的是，在JSFiddle中進行了翻版）：我將100％的百分比分配給select，而jQuery UI給出的寬度爲100px。我試圖把另一個百分比，如88％，同樣的事情發生（88px）。 – user2472523

https://jsfiddle.net/arunpjohny/cprw123d/1/？ - 有點貴（銷燬和重新創建窗口小部件），但是做你需要的，窗口小部件計算尺寸並設置內聯寬度 –

檢查項目來驗證次e分配的jQuery UI iD。選擇菜單通常是#[element]-button。

然後將CSS應用到該ID。在這種情況下

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

似乎解決該問題：Updated Fiddle

你也可以針對所創建的一般jQuery UI的類。如果你只處理1或2個元素，那麼我會發現那些耗費時間來識別ID會做同樣事情的人會花費很多時間。

來源

2016-03-26 04:00:05 Scott

請試試這個：

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

的jsfiddle：https://jsfiddle.net/yzzxvbuw/11/

來源

2016-03-26 04:00:32 satya

一種解決方案是重寫jQuery UI的風格像

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

來源

2016-03-26 04:01:12

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

jQuery UI selectmenu不接受百分比寬度

回答

相關問題