Search code examples
jqueryipadjquery-mobile

jQuery Mobile - Toolbar Ellipsis in iPad

I am rendering HTML locally in an iPad app using jQuery Mobile. The titles are getting "..." ellipses in them, even though there is lots of room. I am using off-the-shelf JQM and JQM CSS classes.

How can I tell JQM to render the full title?

Below is a screen shot with some blue markup.

Here's the Title:

`<div data-role='header' data-position='inline'>
       <h1>the long title goes here</h1></div>`

enter image description here

Solution

  • The h1 tag gets margin applied that you can overwrite so the title won't get clipped so much.

    .ui-page .ui-header h1 {
    margin-left  : 0;
    margin-right : 0;
}​

    Here is a demo: http://jsfiddle.net/ubYWU/

    Note that you will want to give left/right margin values that make it so your title won't overlap with your icon(s).