Jquery mobile header links overlap with long text

Question

I just started working on a jquery mobile app and I am having issues with the header bar when using links.

  <header data-role="header" data-position="fixed">
    <a href="blah" data-icon="back">this is long text</a>
    <h1>page title</h1>
  </header>

The problem is the back link often overlaps the title if either or both of them is a little long. This obviously only happens when views on a mobile device with a smaller screen (vs iPad) or when I shrink my testing browser. But it looks good when testing on wider browsers. Is there any built in jquery way to make this work? Either by shrinking the text size or auto truncating text depending on width? I can surly truncate the text myself but then it looks silly when viewed in a wider browser (or landscape mode) and the links are truncated for no reason.

Any help would be great. Thanks!

UPDATE:

You can test this by going to http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-headers.html

Use firebug/inspector to make the text in any of the toolbar links longer and watch them overlap their headings when the browser is at a smaller width.

Answer 1

I also experienced problems with long titles and buttons colliding. By default, the title is centered in the entire width of the header, and the buttons are absolutely positioned at the sides.

The way I solved this was to make the following adjustments to the CSS in my stylesheet loaded after jQuery Mobile's:

.ui-header { 
    display: table;
    width: 100%;
}

.ui-header .ui-title {
    display: table-cell; 
    width: 100%;
    line-height: 2.5em;
}

.ui-header .ui-btn { 
    display: table-cell; 
}

.ui-header .ui-btn-left, .ui-header .ui-btn-right {
    position: static;
    top: 0;
}

This centers the title in the space after the buttons in the header. Here's a demonstration of the normal behavior, and here's an example with the above fix applied. To see the difference, resize the browser/view. I am aware that display: {table|table-cell} isn't supported well in IE 7.