CODEWITHSUNDEEP
jqueryhtmlcssjquery-mobile
lonelymo
lonelymo

Reputation: 4182

JQuery Mobile Header alignment going haywire

With JQueryM, I am trying to develop a header that is supposed to look like this

|[menu-icon] tickets (left aligned)------------------[search-icon][plus-icon]

My markup is as such

       <div data-role="header" data-position="fixed">
            <a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a>
            <h1 align="left">tickets</h1>

            <a href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="flat-search" data-iconpos="notext" data-inline="true"></a>                         
            <a href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="flat-plus" data-iconpos="notext" data-inline="true"></a> 
        </div>

This apparently doesnt produce the required results. I have tried a lot of ways including Aligning the Jquery mobile header title

and

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

But now I have reached a place where I seem lost. Can anyone please take a look at this?

Upvotes: 1

Views: 216

Answers (2)

Diego87
Diego87

Reputation: 1757

Try this(it's a quickly answer):

<div data-role="header" data-position="fixed">
    <div style="float:left"><a data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a></div>
    <div style="float:left"><h3>tickets</h3></div>
    <div style="float:left;padding-left: 6em; ">
        <a href="#page-new-ticket" data-direction="reverse" id="btn-new-ticket" data-role="button" data-icon="flat-search" data-iconpos="notext" data-inline="false"></a>
        <a href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="flat-plus" data-iconpos="notext" data-inline="false"></a> 
    </div>
</div>

Upvotes: 1

Sga
Sga

Reputation: 3658

There you go, HTML:

<div data-role="header" data-position="fixed">
    <a class="ui-btn-left" data-iconpos="notext" href="#panel" data-role="button" data-icon="flat-menu"></a>
    <h1 class="ui-btn-left spacerleft" >tickets</h1>

    <a class="ui-btn-right spacerright" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="search" data-iconpos="notext" data-inline="true"></a>                         
    <a class="ui-btn-right" href="#page-new-ticket" id="btn-new-ticket" data-role="button" data-icon="plus" data-iconpos="notext" data-inline="true"></a> 
</div>

CSS:

.spacerleft
{
    margin-left: 50px !important;
}
.spacerright
{
    margin-right: 50px !important;
}

JSFiddle

Upvotes: 2

Related Questions