Allineamento del titolo dell'intestazione mobile Jquery

Question

Basta chiedersi se qualcuno sapesse come sovrascrivere il comportamento predefinito in Jquery mobile per allineare il titolo dell'intestazione a sinistra e mantenere lo stesso formato. Non riesco a farlo allineare. Ecco quello che ho:

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

ora questo si muove con successo l'intestazione sopra a sinistra, ma il testo non mantiene lo stesso formato. Cresce enorme e la spaziatura è completamente sbagliata. Qualcuno ha avuto successo lasciando allineato l'intestazione? Grazie in anticipo.

Siamo spiacenti se questa è una domanda noob. Sto solo ora passando al web da applicazioni mobili native ...

Answer 1

Guardando al modo in cui le cose sono disposte nell'intestazione, usano il posizionamento assoluto per i pulsanti e l'allineamento del testo per il titolo. È possibile allineare il testo a sinistra e cambiare la posizione del tasto sinistro seguente modo (ovviamente si dovrebbe raggiungere questo impostando class invece di style attributi correttamente):

<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

L'unica cosa che dovete fare è racchiudere il tag h1 in un tag div che non è il div data-role = "header". Il codice dovrebbe essere simile a questa ...

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

Non è necessario allineare al testo perché il div che sta avvolgendo il H1-tag disabilita il jQuery. Per dare un po 'di margine per il testo in quanto sarà tutta la strada verso sinistra tutto ciò che dovete fare è aggiungere CSS e dovrebbe apparire così ...

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

Che vi darà un po' di margine sinistro a sinistra .