CODEWITHSUNDEEP
headerjquery-mobile
Keith Adler
Keith Adler

Reputation: 21178

Multiple buttons on right hand side of Header

I would like to have more than one button on the right side of the Header bar. The docs say you can customize using a DIV, but when I do that the buttons do not have their normal style. Any advice?

Upvotes: 25

Views: 23820

Answers (5)

Sam Brown
Sam Brown

Reputation: 41

You can use the grid class.

<div class="ui-grid-a ui-btn-right">
        <div class="ui-block-a" ><a href="#" data-role="button" data-inline="true" >Button1</a></div>
        <div class="ui-block-b" ><a href="#" data-role="button" data-inline="true" >Button2</a></div>
</div>

Upvotes: 4

Adam Marshall
Adam Marshall

Reputation: 3019

This is how I did it, seems clean.

HTML

<div id="myHeader" data-role="header" data-theme="a">
    <span class="ui-title"></span>
    <div class="ui-btn-right">
        <a id="myButton1" class="headerButton" href="#" data-role="button"></a>
        <a id="myButton2" class="headerButton" href="#" data-role="button"></a>
    </div>
</div>

CSS

.headerButton {
    float: left;
    margin-right: 5px!important;
}

Upvotes: 13

Robert Varga
Robert Varga

Reputation: 21

 <a href="#" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-icon-left 
    ui-btn-corner-all ui-shadow" data-rel="back" data-icon="cancel" 
    data-theme="a">
    <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Cancel</span>
      <span class="ui-icon ui-icon-arrow-l ui-icon-shadow"></span>
    </span>
 </a>

Upvotes: 0

chepukha
chepukha

Reputation: 2489

The above example puts more than buttons on the header but they are all positioned to the left of the header. I think you can group your buttons in a controlgroup and position the control the group to the right of the header. Maybe something like this: 

 
  <div data-type="horizontal" data-role="controlgroup" class="ui-btn-right">  
     //have your button here
  </div>

Hope this helps.

Upvotes: 33

Phill Pafford
Phill Pafford

Reputation: 85378

I've seen this done in the footer (Shown Here), might give you an idea for the header or toolbar

Upvotes: 8

Related Questions