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.

Might try jquery-collision to detect when they overlap and re-size the elements to a smaller view-point. http://sourceforge.net/apps/mediawiki/jquerycollision/index.php?title=Main_Page — Phill Pafford, Jul 19 '11 at 17:56

OxC0FFEE · Answer 1 · 2012-11-13T16:38:37.130

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 is a step in the right direction, but it's not a perfect solution. In my browser, the example with the fix has a deformed button with an additional outline of another button behind it. I would love to find a solution that truncates the button label and adds an ellipsis if the button exceeds a specified size (either as a percentage, number of pixels, etc.) without changing the look of the toolbar. Likewise, I'd like to apply such truncation with ellipsis to the title and the right-side button as well. — Mr. Lance E Sloan, Dec 10 '13 at 17:05

score 0 · Answer 2 · edited May 23 '17 at 12:09

0

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

Truncating long strings with CSS: feasible yet?

edited May 23 '17 at 12:09

Community

1
1

answered Jul 19 '11 at 15:55

Jasper

75,717
14
151
146

I was hoping for something more up to date and specific for jquery mobile. Those ideas won't work because jquery mobile implements these links surrounding the header with absolute positioning, so it doesn't think it's overflowing anything. – Danny Jul 19 '11 at 16:03
JQuery Mobile styling adds spans to create buttons out of links. You can target the span with the correct class within the link you want to alter. Here is a sample selector: '#link_id span.ui-btn-text' – Jasper Jul 19 '11 at 16:06
I get that, but how I do not think any of the methods in that link will help here. The css3 overflow property will not help because the all of the elements surrounding the text are positioned absolutely so they do not think they are overflowing anything. Targeting the link, span, or any other surrounding element will not help. – Danny Jul 19 '11 at 16:20

Soatl · Answer 3 · 2011-07-19T21:15:49.603

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
}

Jquery mobile header links overlap with long text

3 Answers3