JQuery mobile headers overlap with long text

Question

I just started working on the jquery mobile app and I am having problems with the title 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 that the back link often overlaps the title if one or both of them is a little long. This, obviously, only happens when viewing on a mobile device with a smaller screen (against the iPad) or when compressing my test browser. But it looks good when testing on wider browsers. Is there a built-in jquery way to make this work? Either by reducing the size of the text, or by automatically trimming the text depending on the width? I can sullenly crop the text myself, but then it looks silly when viewed in a wider browser (or in landscape mode), and the links are truncated for no reason.

Any help would be great. Thank you

UPDATE:

You can verify 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 smaller.

Answer 1

I also had problems with long headers and buttons. By default, the title is centered over the entire width of the title, and the buttons are absolutely located on the sides.

As I decided, this is to make the following CSS settings in my stylesheet loaded after jQuery Mobile:

 .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 space after the buttons in the title. This demonstrates normal behavior , but here is an example with the above fix applied . Resize the browser / view to see the difference. I know the mapping: {table | table-cell} is not supported in IE 7.

Answer 2

This has been discussed in stackoverflow. The following link offers many different strategies for truncating long lines:

Trimming long lines with CSS: maybe more?

Answer 3

There are a few things you could try.

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

The header "header" and "data-role =" may be conflicting. Try to make it a div

Also, if you use any css to create these headers, try using percentages and ems for height. This ensures that the title will look almost identical for each mobile browser (although some make it look like others, like opera mobi)

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 this does not work, try specifying a specific height for each element in the header. For some phones (especially the iPhone), these divs overlap or crop 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 this does not fix the problem, you may need to, for example, reduce the font size. This is a problem with mobile phones, especially with a jQuery mobile phone that does not support most mobile phones (HTC, Blackberry, etc.) Have some small problems like these that you might encounter)

Edit Another note. This usually works better if you are trying to reload 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 }