CODEWITHSUNDEEP
javascriptjqueryjquery-mobile
Peter Olson
Peter Olson

Reputation: 142921

Why is my header text being truncated?

I have a page built with jQuery mobile with header markup that looks like this:

<div data-role="header">
    <h1>The Magnet Puzzle</h1>
</div>

I tested it out in an Android and a Windows phone, and in both it truncates the last three characters of the header text, even though the header is wide enough to fit the entire title:

turncated header

I want it to look like this instead:

full header text

Why is it being truncated, and how can I fix it so that it displays the entire title?

Upvotes: 17

Views: 18511

Answers (8)

AdharSri
AdharSri

Reputation: 3

I know it's a dead thread but still...

Just use <p style="text-align:center"> instead of <h1> and you should be fine(Only for dialogs).

<div data-role="header">
    <p style="text-align:center">The Magnet Puzzle</p>
</div>

Upvotes: 0

Pascal
Pascal

Reputation: 11

add in your file

<style type="text/css">
    .ui-header .ui-title {margin: 0 20%}
</style>

to change the default margin of header.

Upvotes: 1

Pitto
Pitto

Reputation: 8579

I've tried all the suggested solutions, always failing.

I could solve the problem editing the jquery.mobile-1.3.1.min.css.

Use your text editor find function to find this:

margin:.6em 30% .8em;

and comment it :

/* margin:.6em 30% .8em; */

Worked perfectly for me on jquery mobile 1.3.1 (used locally, of course).

Upvotes: 1

Seanonymous
Seanonymous

Reputation: 1384

Just wrap your <h1> in a <div>:

    <div data-role="header">  
        <div><h1>The Magnet Puzzle</h1></div>  
    </div>

(Then center the h1 with your preferred CSSery.)

Upvotes: 1

Day
Day

Reputation: 349

Your viewport meta must fit with the device screen. Add into the <head> : 

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1,
minimum-scale=1, width=device-width, height=device-height, 
target-densitydpi=device-dpi" />

All details and explanations here :

Anatomy of a Jquery Mobile Page

Upvotes: 0

bvs
bvs

Reputation: 1087

I think the real trouble is that JqMobile is setting the left and right margin to 30% leaving only 40% of the total width for your title. Change that to 10% and you get the ellipsis when you really need it.

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}

Upvotes: 39

Ivan
Ivan

Reputation: 10372

It's being truncated because of jQuery Mobile's CSS for .ui-header .ui-title, which sets the overflow to hidden, the white-space to nowrap and the text-overflow to ellipsis.

I'm not sure if there is a better way to do this, but you can override the jQuery mobile CSS like so:

.ui-header .ui-title {
  overflow: visible !important;
  white-space: normal !important;
}

This question has been asked before with the same answer.

Upvotes: 10

sascha
sascha

Reputation: 4690

This is done with CSS.

text-overflow: ellipsis;

Remove this from the JqMobile CSS or overwrite it with your own.

Upvotes: 0

Related Questions