CODEWITHSUNDEEP
jquery-mobile
Christophe Debove
Christophe Debove

Reputation: 6296

Jquery Mobile Multiline Button

How can I set this button multiline?

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

Upvotes: 4

Views: 4307

Answers (2)

Tosh
Tosh

Reputation: 1857

The above answer given by ppshein is incorrect. It makes a bigger button but doesn't make the button multilined. The only thing you need to do is add the following css:

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

It works both for button and input tags.

Btw there's a bug for IE: the text in the button isn't clickable. The fix is found at github:

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

Upvotes: 9

Pyae Phyoe Shein
Pyae Phyoe Shein

Reputation: 13787

It's simple. Change existing .ui-btn-inner class as follow.

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

after that, change existing two class as follow

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

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

You can visit my blog for detail

How to make square shape button in jQueryMobile

Upvotes: -1

Related Questions