Alineación del título del encabezado móvil de Jquery

Question

Solo me preguntaba si alguien sabía cómo anular el comportamiento predeterminado en Jquery mobile para alinear el título del encabezado a la izquierda y mantener el mismo formato. Parece que no puedo alinearme. Aquí es lo que tengo:

<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 --> 

ahora esto se mueve con éxito la cabecera hacia la izquierda, pero el texto no mantiene el mismo formato. Crece enorme y el espaciado es incorrecto. ¿Alguien ha tenido éxito al alinear el encabezado? Gracias por adelantado.

Disculpe si esta es una pregunta novato. Ahora estoy cambiando a la web desde aplicaciones móviles nativas ...

Answer 1

Mirando la forma en que se colocan las cosas en el encabezado, usan el posicionamiento absoluto para los botones y alinean el texto para el título. Puede alinear el texto a la izquierda y cambiar la posición del botón izquierdo de la siguiente manera (por supuesto usted debe lograr esto mediante el establecimiento class en lugar de style atributos correctamente):

<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 --> 

Answer 2

La única cosa que tienes que hacer es envolver su etiqueta h1 en una etiqueta div que no es div data-role = "encabezado". El código debería tener este aspecto ...

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

No es necesario alinear al texto porque el div que está envolviendo la etiqueta h1 desactiva el jQuery. Para dar cierto margen al texto ya estará todo el camino hacia la izquierda todo lo que tiene que hacer es añadir CSS y debería tener este aspecto ...

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

qué le dará cierto margen izquierdo de la izquierda .