CODEWITHSUNDEEP
jquery-mobile
Koesper
Koesper

Reputation: 551

jQuery Mobile: multi-line buttons, in a vertical control group

On my jQuery Mobile page, i'm using a horizontal control group for some buttons. But in some languages the text within these buttons is too long.

Instead of wrapping the text within each button, the buttons themselves wrap onto the next line.

Screenshot of problem

this is the base code:

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

and with this css, we convince it to wrap inside the buttons. Otherwise the text is truncated with an ellipsis

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

On the third page of this fiddle the problem is demonstrated http://jsfiddle.net/koesper/R8Kwe/

Anyone have any ideas how I might tackle this?

Thanks in advance, Casper

ps. Inspiration for the original fix came from Tosh in Jquery Mobile Multiline Button

Upvotes: 2

Views: 3416

Answers (2)

imaginethepoet
imaginethepoet

Reputation: 864

Trim your long buttons - that's a usability issue. If you have action buttons named that long seems like that just defeats the purpose of an action? Other than that I wouldn't use controlgroups for something like this. I would use a custom data theme & some grids to house my buttons inline.

Upvotes: 0

Jasper
Jasper

Reputation: 75993

You could set widths for the links in your control-group:

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

This will keep them on the same line. Here is a demo: http://jsfiddle.net/R8Kwe/6/

Also, just to be thorough, the white-space : normal actually needs to be applied to the .ui-btn-text element which is a child of the .ui-btn-inner element (so it still receives the inherited value).

Upvotes: 4

Related Questions