JQuery Mobile <h1> Headings Off?

Question

I am having a problem with the header title in my jquery code.

Basically after the third character of the header that I get ... I would like to display the entire header.

Why is this turning off and how can I fix it?

Answer 1

The correct CSS solution is described in paragraph 4 here

http://www.webdesignerdepot.com/2011/05/10-handy-jquery-mobile-tips-and-snippets-to-get-you-started/

For list items, add:

body .ui-li .ui-li-desc { white-space: normal; } 

For the contents of the footer, add:

 body .ui-footer .ui-title { white-space: normal; } 

Or take a look at this workaround

http://operationmobile.com/how-to-stop-your-jquery-mobile-header-from-being-cut/

Answer 2

Here is the solution I used:

 <style> .ui-header .ui-title { margin-right: 0px; margin-left: 0px; } </style> 

Note that this probably only works because there is nothing in my title bar, such as buttons. If you just use white-space: normal; , you get text that wraps the lines, but still takes up two lines. (which I tried to avoid using margin-* .)