JQuery мобильная многострочная кнопка - PullRequest
Новая
       0

JQuery мобильная многострочная кнопка

4 голосов
/ 17 сентября 2011

Как мне установить эту кнопку мультилинейной? 

<a style="width:33%; display:inline-block; " href="/foos.html"  data-role="button" data-icon="arrow-l">a lot of text </a>

Ответы [ 2 ]

9 голосов
/ 14 ноября 2011

Приведенный выше ответ ppshein неверен.Это делает большую кнопку, но не делает кнопку многопоточной.Единственное, что вам нужно сделать, это добавить следующий CSS: 

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

Это работает как для кнопки, так и для ввода тегов.

Кстати, есть ошибка для IE: текст на кнопке не кликабелен.Исправление найдено на github:

https://github.com/timmywil/jquery-mobile/commit/59a4946d776e9b1f6a75e9eb53ccb38347612125

0 голосов
/ 17 сентября 2011

Все просто.Измените существующий класс .ui-btn-inner следующим образом. 

.ui-btn-inner { 
    padding: 2em; 
    display: block; 
    height: 100%; 
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap; 
    position: relative; 
}

, затем измените существующий класс следующим образом 

<!--- add it after .ui-select ---> 
.ui-select .ui-btn-inner {padding: .6em;} 

<!--- add it after .ui-checkbox ---> 
.ui-checkbox .ui-btn-inner {padding: .6em;}

Вы можете посетить мой блогдля деталей

Как сделать квадратную кнопку в jQueryMobile

...