Question

I am doing a project using PhoneGap + jQuery Mobile in Android. I am trying to make the header like this:

[BTN 1]——–APP NAME——-[BTN 2]

USER NAME———————[BTN 3]

I tried the following code but only can get this:

    <div data-role="header" data-position="fixed">
        <a href="#" data-icon="gear">Edit</a>
        <h1>APP NAME</h1>
        <a href="#" data-icon="plus">Children</a>
        <div>
            USERNAME
            <a href="add.html?" data-rel="dialog" data-transition="slidedown" data-role="button" data-icon="plus">Measurement</a>
        </div><!-- /navbar -->
    </div>

[BTN 1]——–APP NAME——-[BTN 2]

USER NAME[BTN 3]

Then I tried following:

<div data-role="header" data-position="fixed">
    <a href="#" data-icon="gear">Edit</a>
    <h1>APP NAME</h1>
    <a href="#" data-icon="plus">Children</a>
    <div>
        USERNAME
        <a href="add.html?" data-rel="dialog" data-transition="slidedown" data-role="button" data-icon="plus" class="ui-btn-right">Measurement</a>
    </div><!-- /navbar -->
</div>

Then it become:

[BTN 1]——–APP NAME——-[BTN 3]

USER NAME———————

I think it is because [BTN 3] is on the top of the [BTN 2]

So how can I get the first layout? Any suggestion will be appreciated.

Answer 1

try using ui-grid (aka Grids):
DEMO: http://jquerymobile.com/demos/1.0a3/#docs/content/content-grids.html

..from there you can easily set the desired alignment of each container 🙂