jQuery移動控制組水平佈局問題

jQuery移動1.0似乎有控制組的佈局問題水平。任何幫助表示讚賞。jQuery移動控制組水平佈局問題

UI代碼：

<fieldset data-role="controlgroup" data-type="horizontal"> 
<legend>Date of Birth</legend> 

<select name="SelDateOfBirthMonth" id="SelDateOfBirthMonth"> 
    <option value="">Month</option> 
    <option value="jan">January</option> 
    <option value="feb">February</option> 
    <option value="mar">March</option> 
</select> 

<select name="SelDateOfBirthDay" id="SelDateOfBirthDay"> 
    <option value="">Day</option> 
      <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
</select> 

<select name="SelDateOfBirhtYear" id="SelDateOfBirhtYear"> 
    <option value="">Year</option> 
    <option value="2011">2011</option> 
    <option value="2010">2010</option> 
    <option value="2019">2009</option> 
</select> 
</fieldset>

jQuery Mobile Layou http://img835.imageshack.us/img835/470/jqmobilecontrol.jpg

來源

2011-12-22 bmustata

如果任答案幫助了你，請接受一個或另一個。謝謝。 – 2012-01-03 13:35:42

我遇到這個問題的時候，控件絕對夠窄。似乎只在Chrome瀏覽器上發生。 – 2012-12-04 22:13:00

根據jQuery Mobile的文檔（重點煤礦）：

通過添加數據類型= 「水平」屬性添加到controlgroup 容器，您可以交換到水平樣式的組，並排浮動並排設置寬度，並將寬度設置得足夠大以適應的內容。 （請注意，這些都將換爲多行，如果數字按鈕或整體文本長度對於屏幕太寬。）

這裏的link to the doc

來源

2011-12-22 16:12:06

+！因爲我認爲這是造成 – 2011-12-22 16:22:41

的原因，但是這會導致我的按鈕打包，儘管它們的尺寸很小（僅在Chrome瀏覽器中也是如此） – 2012-12-04 22:21:22

我看到你這裏下面的示例代碼：

http://jquerymobile.com/demos/1.0/docs/forms/selects/

當我在這裏重現它，它看起來不錯：

http://jsfiddle.net/jmHTc/1/

它是嵌套在可能被填充它，並使它顯示像這樣的任何其他標記？

你能截斷這樣的名字嗎？

http://jsfiddle.net/jmHTc/3/

正如布賴恩指出的還有它只是被大以適應屏幕

來源

2011-12-22 16:22:25

您需要在這種情況下，以同時覆蓋人像和風景類的機會。 jQM試圖變得聰明，但它的計算對我來說效果不佳。只需使用firebug與你的瀏覽器皮膚寬而寬，看看jQM是如何應用寬度變化的類。當您切換到肖像或您的顯示端口在您的瀏覽器中變得很瘦時，它將添加和刪除.ui-field-contain類。

您正在尋找，如果你將其設置爲覆蓋寬度和顯示的這些（inline-block的）都是相同的，你會明白我的意思：

的.ui場-包含的.ui-controlgroup-控制{}

的.ui-controlgroup-控制{}

的.ui-場包含的.ui-controlgroup標籤{}

。ui-controlgroup-label {}

來源

2012-02-17 02:24:52

我有同樣的事情，但能夠通過將data-mini="true"添加到我的選擇標籤而無需使用特殊的CSS來解決此問題。

來源

2012-09-11 08:31:47 gdeg

我加了display：inline-flex; ...不要問我爲什麼，雖然因爲我不知道。

<span id  = "blah" 
     data-role = "controlgroup" 
     data-type = "horizontal" 
     style  = "display: inline-flex;" 
    > 
    <a ...> 
    <a ...> 
</span>

來源

2013-08-28 08:11:48 dsdsdsdsd

inline-flex是靈活盒子模型的一部分，它沒有很好的整體支持（到目前爲止已經有幾個實現了不同的屬性名稱，並且它們的行爲都不相同）。建議不要使用靈活的盒子模型，直到規範被強制執行爲止。 – Aejay 2013-09-05 15:08:05

在Chrome檢查器中，它看起來像的寬度被設定爲78％，持續的.ui-場包含和的.ui-controlgroup-對照。刪除這個寬度確實設置了這些按鈕，以便它們都顯示在一行上。

我能夠在自己的.css文件中添加以下規則來解決此問題：

.ui-field-contain .ui-controlgroup-controls { 
    width:100%; 
}

來源

2013-09-17 20:10:07 eb1

雖然接受的答案是正確的，它並沒有解決問題。

我會提出一個故障排除檢查和兩個解決方法。

確保任何容器不限制可用於控制組div的空間。
嘗試在控制組div中使用ui-mini類。這會讓你的按鈕更小。
給對照組一個負值。有些人會稱之爲黑客攻擊，但它有效並且有效。查看this article瞭解更多信息。

2和3：

<div data-role="controlgroup" data-type="horizontal" class="ui-mini" style="margin-right: -10px;"> 
    <!-- buttons and whatnot... --> 
</div>

來源

2014-05-17 19:27:30 Adam

jQuery移動控制組水平佈局問題

回答

相關問題