CODEWITHSUNDEEP
jquery-mobile
KawaGreen
KawaGreen

Reputation: 352

Add button to right side of header

I would like to add an icon button to the right side of my header in jQuery mobile. I'm having trouble with the automatic left positioning.

Here's my header:

<div data-role="header" data-position="inline">
     <h1>Resultaten</h1>
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
        data-direction="reverse" onclick="empty()" data-transition="slide"
        data-iconpos="notext">home</a>
</div>

Upvotes: 11

Views: 18224

Answers (3)

Hardik Patel
Hardik Patel

Reputation: 838

Use class="ui-btn-right" or add a class ui-btn-right in <a>

<div data-role="header" data-position="inline">
     <h1>Resultaten</h1>
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
        data-direction="reverse" onclick="empty()" data-transition="slide"
        data-iconpos="notext"  class="ui-btn-right">home</a>
</div>

Upvotes: 16

Sohail xIN3N
Sohail xIN3N

Reputation: 3041

There is a data attribute in jQuery Mobile ver 1.2+, you can use data-iconpos="right".

<a href="#Home" data-role="button" data-icon="home" data-iconpos="right" data-iconshadow="false"
    data-direction="reverse" onclick="empty()" data-transition="slide"
    data-iconpos="notext">home</a>

Official Documentation

Upvotes: -1

Andy-G
Andy-G

Reputation: 31

If you have multiple buttons that you want to align to the right using the class="ui-btn-right" in <a> will place all the buttons on top of each other. Instead you can just wrap a div around it and float to the right.

<div data-role="header" data-position="inline">
    <h1>Resultaten</h1>
    <div style="float:right;">
        <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
        data-direction="reverse" onclick="empty()" data-transition="slide"
        data-iconpos="notext"  class="ui-btn-right">btn 1</a>
        <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false"
        data-direction="reverse" onclick="empty()" data-transition="slide"
        data-iconpos="notext"  class="ui-btn-right">btn 2</a>
    </div>
</div>

Upvotes: 2

Related Questions