All geek questions in one place

JQuery Mobile Header Alignment

Just wondering, did anyone know how to override the default behavior in jQuery mobile in order to align the title bar on the left and keep the same format. I can't seem to build it. Here is 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 it successfully moves the title to the left, but the text does not save the same format. It becomes huge, and the gap is wrong. Has anyone left the title alignment? Thanks in advance.

Sorry if this is a noob question. I just go online from my native mobile apps ...

+6
source share
2 answers

Considering how things are arranged in the title, they use absolute positioning for the buttons and text alignment for the title. You can align the text to the left and change the position of the left button as follows (of course, you must achieve this by setting the class instead of the style attributes):

 <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 -->
+10
source

The only thing you need to do is wrap your h1 tag in a div tag that is not a data-role = "header" div 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 do not need to align the text because the div that wraps the h1 tag disables jQuery. To give some margin to the text, since everything will be left, all you have to do is add CSS and look like this ...

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

This will give you the left edge on the left.

0
source

Source: https://habr.com/ru/post/896350/

More articles:


All Articles