jQuery Mobile：在垂直控制組中的多行按鈕

在我的jQuery Mobile頁面上，我爲某些按鈕使用了水平控件組。但在某些語言中，這些按鈕內的文字太長。jQuery Mobile：在垂直控制組中的多行按鈕

而不是在每個按鈕內包裝文本，按鈕本身包裝到下一行。

Screenshot of problem

這是基本代碼：

<div data-role="controlgroup" data-type="horizontal"> 
    <a href="#pageVertical" data-role="button">short button</a> 
    <a href="#pageVertical" data-role="button">really really really insanely long button is really really insanely long. No really, who makes buttons this big?</a> 
</div>

和與該CSS，我們說服它的按鈕內包裹。否則，文本將被截斷以省略號

.ui-btn-inner{ 
    white-space: normal !important; 
}

在此小提琴的第三頁的問題證明 http://jsfiddle.net/koesper/R8Kwe/

任何人有任何想法如何，我可以解決呢？

由於提前，卡斯帕

PS。靈感原自修復託什在Jquery Mobile Multiline Button

來源

2012-04-17 Koesper

哦，是的，值得一提的是，在按鈕文字內添加一個簡單的
是完全忽略的。 JQM創建一個沒有html的按鈕的副本，並顯示一個 – Koesper 2012-04-17 12:48:06

來到你可以在你的控制組的鏈接設置寬度：

.ui-page .ui-content .ui-controlgroup a { 
    width : 49%; 
}

這將讓他們在同一行。這裏是一個演示：http://jsfiddle.net/R8Kwe/6/

而且，剛需深入，white-space : normal需要實際應用到.ui-btn-text元素，這就是.ui-btn-inner元素（因此，它仍然會接收繼承值）的孩子。

來源

2012-04-17 16:54:11 Jasper

感謝您的建議，這可以與一些進一步的調整（指定高度，以便它們看起來相似）。我希望有一個解決方案，雖然這會更靈活一點，當它們中的一個需要它時，會自動增加所有按鈕的高度。我會再等待24小時，看看有人能幫助我，否則我會將您的答案標記爲已接受。 – Koesper 2012-04-18 08:56:46

我在[Fiddle]上實現了你的建議（http://jsfiddle.net/koesper/R8Kwe/）。希望我們可以進一步改善這一點，以更好地利用可用寬度 – Koesper 2012-04-18 09:28:45

標記爲已接受，但我還不完全滿意:-) – Koesper 2012-04-19 13:35:01

修剪你的長按鈕 - 這是一個可用性問題。如果你有動作按鈕，長久以來似乎只是擊敗了動作的目的？除此之外，我不會使用controlgroups這樣的東西。我會使用自定義數據主題&某些網格來放置我的按鈕內聯。

來源

2012-04-18 01:59:48 imaginethepoet

你是絕對正確的，像這樣的按鈕太長了，這就是爲什麼我誇大了例。在我的實際頁面中，文本只有幾個字符太長而不適合一行。（兩個長法文單詞，或者兩個英文短文...） – Koesper 2012-04-18 08:49:35

jQuery Mobile：在垂直控制組中的多行按鈕

回答

相關問題