CODEWITHSUNDEEP
jquery-mobile
Louis
Louis

Reputation: 2608

Jquery Mobile : float several buttons right, in the header

I am using Jquery Mobile and I am trying to place two button on the right of the header.

        <header data-role="header">
            <h1>Myapptitle</h1>
            <div class="share-it-wrapper">
                <select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="app-shareicon" data-theme="a" data-iconpos="notext" onchange="handleSocialShare()">
                    <option value="no"></option>
                    <option value="facebook"><img src="images/fb.png" />Facebook</option>
                    <option value="twitter"><img src="images/twitter.png" />Tweeter</option>
                    <option value="email"><img src="images/email.png" />Email</option>
                </select>
            </div>
        <a href="#creditspage" data-icon="info" data-theme="a" data-iconpos="notext" class="ui-btn-right">Credits</a>
        </header>

For now, my buttons are not aligned : enter image description here

The doc indicate to use data-role="controlgroup" and data-type="horizontal" but if I wrap the buttons into a <div data-role="controlgroup" data-type="horizontal"> then the #creditspage buttons becomes text... is there a bug in JQM (Cf the doc seems to also have the problem). How can I achieve perfect alignment for buttons on the right ? Thanks

Upvotes: 1

Views: 1795

Answers (1)

ezanker
ezanker

Reputation: 24738

You can surround both buttons in a div with class ui-btn-right. This places the div at the right side of the header. Then you need a little CSS to put the 2 buttons inline and next to eachother.

<header data-role="header">
     <h1>Myapptitle</h1>

    <div class="ui-btn-right">
        <div class="share-it-wrapper">
            <select name="select-choice-share" id="select-choice-share" class="shareitbutton" data-icon="app-shareicon" data-theme="a" data-iconpos="notext" onchange="handleSocialShare()">
                <option value="no"></option>
                <option value="facebook">
                    <img src="images/fb.png" />Facebook</option>
                <option value="twitter">
                    <img src="images/twitter.png" />Tweeter</option>
                <option value="email">
                    <img src="images/email.png" />Email</option>
            </select>
        </div> 
        <a href="#creditspage" data-icon="info" data-theme="a" data-iconpos="notext" data-role="button" class="headerButton">Credits</a>
    </div>
</header>

The CSS to make this work is a little different in jQM 1.3 vs 1.4.

For 1.3:

.headerButton, .share-it-wrapper {
    float: left;
    margin-right: 5px!important;
}
.headerButton {
    margin-top: 8px!important;
}

For 1.4:

.headerButton, .share-it-wrapper {
    display: inline;
    margin-right: 5px!important;
}
.share-it-wrapper .ui-select{
    display: inline;    
}

1.3 DEMO

1.4 DEMO

Upvotes: 2

Related Questions