Jquery mobile header links overlap with long text

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开发者_C百科 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.

---

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.

---

This has been discussed on stackoverflow. The following link suggests many different strategies for truncating long strings:

Truncating long strings with CSS: feasible yet?

---

There are a few things you could try.

 <header data-role="header" data-position="fixed">

The "header" and "data-role="header"" may be conflicting with each other. Try making it a div

Also, if you are using any css to style these headers try using percentages and ems for height. This will ensure that the header will look almost identical for each mobile browser (though some do make it look different, like opera mobi for example)

Here is an example:

.ui-header .ui-title, .ui-footer .ui-title {
    display: block;
    font-size: 1em; //Font size is a height, use ems
    margin: 0.6em 90px 0.8em;
    outline: 0 none !important;
    width: 50%; //For widths use %
}

If that doesn't work, then try to specify a specific height for each element in the header. For some phones (Especially iPhones) these divs will overlap or get cut off if a specific height is not specified.

<a href="blah" data-icon="back" id = "link">this is long text</a>
<h1>page title</h1>

#link
{
   height: 10px; //(Or you can use ems, but this may not be needed)
}

If that doesn't fix the issue, then you may just need to decrease font size for example. This is the problem with mobile phones, especially with JQuery mobile, which does not support a large majority of mobile phones (HTC, Blackberry, ect all have some small issues like this that you may encounter)

Edit One more note: It usually works better if you attempt to over-ride the JQuery Mobile css instead of trying to apply your own. By this I mean:

<header data-role="header" data-position="fixed" id ="header">

.ui-header {
 //CSS
}

usually will work better than

#header {
  /CSS
}