CODEWITHSUNDEEP
cssjquery-mobile
Fabrizio Mazzoni
Fabrizio Mazzoni

Reputation: 1909

jquery-mobile header two icons on right side next to each other

Having 3 icons in a data-type='header' how do I place 1 on the left and the other 2 on the right of the header panel?

<div data-role="header" data-theme="a" data-position="fixed">
    <center><img src="img/logo.png" style="height: 32px;"></center> 
    <a href="#nav-panel" data-icon="bullets" class="ui-alt-icon" data-iconpos="notext" id="headmenu">Menu</a>
    <a href="#" data-icon="recycle" class="ui-alt-icon" data-iconpos="notext" id="refresh">Home</a>
    <a href="#" data-icon="home" class="ui-alt-icon" data-iconpos="notext" id="homebut">Home</a>
</div>

This will place the third icon in a new row,

Upvotes: 0

Views: 964

Answers (2)

Fabrizio Mazzoni
Fabrizio Mazzoni

Reputation: 1909

Works with:

<div data-role="header" data-theme="a" data-position="fixed">
    <a href="#nav-panel" data-icon="bullets" class="ui-alt-icon" data-iconpos="notext" id="headmenu">Menu</a>
    <div data-role='control-group' data-type="horizontal" class="ui-btn-right" >
        <a href="#" class="ui-btn ui-corner-all ui-icon-refresh ui-btn-icon-notext ui-alt-icon" id="homebut">Home</a>           
        <a href="#" class="ui-btn ui-corner-all ui-icon-home ui-btn-icon-notext ui-alt-icon" id="homebut">Home</a>
    </div>
</div>

Upvotes: 2

Karikalan
Karikalan

Reputation: 253

I got a work around,

HTML:

<div data-role="header" data-theme="a" data-position="fixed">
    <div data-type="horizontal" class="ui-btn-left">
        <a href="#nav-panel" data-role="button"  data-icon="bullets" class="ui-alt-icon" data-iconpos="notext" id="headmenu">Menu</a>
    </div>
    <img src="img/logo.png" style="height: 32px;" />
    <div data-type="horizontal" class="ui-btn-right" >
        <a href="index.html" data-role="button" data-icon="arrow-u" data-iconpos="notext">Up</a>
        <a href="#" data-role="button" data-icon="home" data-iconpos="notext" id="homebut">Home</a>
    </div>
</div>

CSS:

.ui-header-fixed{
      text-align: center;
      padding-bottom: 5px;
}

A Sample from JS Fiddle

Upvotes: 0

Related Questions