Home/ Questions/Q 6870435
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T03:41:00+00:00

I have a simple app that I am running on an iPhone (iOS 5),

  • 0

I have a simple app that I am running on an iPhone (iOS 5), which doesn’t properly size and position the back button and the header text. The header text winds up being underneath the button. I guess jQuery Mobile doesn’t size/position things as expected out of the box…

What I am after is that the header text gets truncated and starts to the right of the back button. There won’t be another button to the right of the title, so it is fine if it goes to the right of the page.

    <!DOCTYPE html>
    <html>
        <head>
            <title>Page Title</title>
            <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css"/>        
            <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
            <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>    </head>
        <body>
            <div data-role="page">
                <div data-role="header">
                    <a data-icon="arrow-l" data-rel="back">A long button</a>
                    <h1>A very very very long title</h1>
                </div>

                <div data-role="content">
                    <p>Page content goes here.</p>   
                </div>

                <div data-role="footer">
                    <h4>Page Footer</h4>
                </div>
            </div>
        </body>
    </html>

A runnable example is at: http://jsfiddle.net/5n8WN/

I did look at this answer but what I did try didn’t get me what I wanted.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The reason your title is being covered is that there is a 90px margin on the right/left of the H1 tag and your back button is larger than 90px. You can change the CSS rules for the .ui-title class to fix this:

    .ui-title {
    margin     : 0.6em 1em 0.8em 140px !important;
    text-align : left !important;
}

    Here is a jsfiddle: http://jsfiddle.net/jasper/5n8WN/1/

    • 0