jQuery Forum

I have the same problem. It seems the buttons will appear, but not quite in the correct spot. I have tried two things that both don't work

With the code below, the two buttons show up in the right position - just they are a few pixels too low

      <div data-role="page" class="myODialog" id="pageScheduleDetail">
         <div data-role="header" data-position="fixed">
            <h1>Schedule Detail</h1>
            <div data-role="controlgroup" class="ui-btn-right">
               <a href="index.html" data-role="button" data-icon="arrow-u">Prev</a>
               <a href="index.html" data-role="button" data-icon="arrow-d">Next</a>
            </div>
         </div>
      </div>

If I move the "class='ui-btn-right'" to the lines with the buttons, then the position is exactly correct but only the last button is visible.

Can anyone tell me the proper way to do this?
Thanks
AZ

currently you can't put more than two buttons to the header, but there are currently two ways to work around this:

Here is how I did it, keep in mind that the style stuff i added may not all be needed. i used the class already present in the css for buttons and applied it to the first div.

Confirmed, this worked for me too.  Thanks!

You can easily put additional buttons on a header by using absolution position. The header is already position:relative, so by using position:absolute on the button, you can position relative to header edges.

You could also just use left or right margin to accomplish this. (No position:absolute needed for this.)

The first and last buttons will be automatically positioned by jQuery Mobile. You only need to position the additional buttons.

To keep the text from running over, you will need to increase the margin on the title. I recommend you set equal left and right margin, even if you are only adding an extra button on the left or on the right.

For example:

.mapsheader .locationBtn {
  position: absolute;
  top: 6px;
  right: 42px;
  }

.mapsheader .ui-title {
  margin-right: 75px;   /* make room for location button */
  margin-left: 75px;    /* Balance so that titles center */
  }

Two things that are very handy, and I'd really say essential for customizing jQuery Mobile are a through knowledge of CSS and familiarity with a CSS debugging tool, like Firebug or WebKit Web Inspector. JQM makes knocking out a quick rough prototype very easy, but you still need the same in-depth knowledge and tools you would use for any web project once you get past the surface.