Aligning the Jquery mobile header title

Question

Just wondering if anyone knew how to override the default behavior in Jquery mobile to align the Header title to the left and keep the same format. I can't seem to get it to line up. Here's what I have:

<div class="ui-body-x" data-role="header" data-position="fixed">
  <div class="ui-grid-x">
    <h1 class="ui-link">Add New Record</h1>
    <div data-type="horizontal" style="top:5px;position:absolute;float:right;z-index:10;display:inline;" align="right" class="ui-btn-right"> 
        <a href="www.google.com" data-role="link" data-icon="settings" data-ajax="false">Cancel</a>
        <a href="www.google.com" class="ui-btn-up-x" data-role="button" data-icon="" data-ajax="false">Submit</a> 
    </div>
  </div>                                    
</div><!-- /header -->

now this successfully moves the header over to the left, but the text doesn't keep the same format. It grows huge and the spacing is all wrong. Has anyone had any success left aligning the header? Thanks in advance.

Sorry if this is a noob question. I am just now shifting over to the web from native mobile applications...

Solution 1

Looking at the way things are disposed in the header, they use absolute positioning for the buttons and text-align for the title. You can align the text to the left and change the position of the left button the following way (of course you should achieve this by setting class instead of style attributes properly):

<div data-role="header" data-position="fixed" >
    <h1 style="text-align:left; margin-left:10px;">Page title</h1>
    <a href="www.google.com" data-icon="delete" style="left:auto; right:120px;">Cancel</a>
    <a href="www.google.com" data-icon="check" data-theme="b">Submit</a>
</div><!-- /header -->

Solution 2

The only thing you have to do is to wrap your h1-tag in a div-tag that is not the div data-role="header". Your code should look like this...

<section id="firstpage" data-role="page">
    <div data-role="header">
      <div>
        <h1>Grade Calculator</h1>
      </div>
    </div><!-- end data-role = header -->
 </section>

You don't need to text align because the div that is wrapping the h1-tag disables the jQuery. To give some margin to the text since will be all the way to the left all you have to do is to add CSS and should look like this...

 [data-role="header"] h1 {
    margin-left: 10px;
}

That will give you some left margin in the left.

Comments

[gabaum10]

Did the trick. I am not really sure why that didn't work before. Thanks for the help.

[Tom Bates]

always nervous that changes like this will adversely effect the layout on one of the JQM tested devices. Looks safe enough though, and works well!

[Ignitor]

If you follow the advice to put these styles into a CSS class, add !important behind the values or they will be overwritten when JQM enhances the markup. Example: .page-title-left { text-align: left !important; margin-left: 10px !important;}