CODEWITHSUNDEEP
jquery-mobile
mlewis54
mlewis54

Reputation: 2380

jquery mobile Header icon placement different in 1.2.0-Beta-1

I have a right log off button in my header on each page which is defined this way:

<div data-role="page" id="displaySchedule" data-title="Display Schedule">
<div data-role="header" data-theme="a">
<a href="#home" data-icon="home" data-iconpos="notext"></a>
<h1>Schedule</h1>
<div class="ui-btn-right">
<a class="logoffButton" data-role="button" id="logoffButton" href="#logout" data-icon="delete" data-iconpos="notext"></a>
</div>
.....

This worked fine in 1.1.1. However, when the page is displayed in 1.2.0-Beta-1, the header looks like the following (notice the X icon is below the horizontal line (by about 1/2 of its height) of the home button and the word Schedule). In 1.1.1, all three were lined up correctly.

enter image description here

Any help is, of course, appreciated.

Upvotes: 2

Views: 914

Answers (1)

Littm
Littm

Reputation: 4947

In fact, you shouldn't include your right button inside a div.

Have a try:

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>

    </head>

    <body>

        <div data-role="page" id="displaySchedule" data-title="Display Schedule">
            <div data-role="header" data-theme="a">

                <a href="#home" data-icon="home" data-iconpos="notext"></a>
                <h1>Schedule</h1>
                <a class="logoffButton" data-role="button" id="logoffButton"
                    href="#logout" data-icon="delete" data-iconpos="notext"></a>

            </div>
        </div>

    </body>
</html>

screenshot

If you want to add multiple aligned buttons within the header, you can do the following:

  • Include the class class="ui-btn-right" (or class="ui-btn-left") to your button / link <a> for the buttons which will be positioned at the right (left) side of the header title

  • Play with CSS's margin-right and / or margin-left to separate the different buttons from a same side (right / left); otherwise, the buttons will be stacked together.

Here's a simple example including several buttons:

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no'/>        

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile.structure-1.2.0-beta.1.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0-beta.1/jquery.mobile-1.2.0-beta.1.min.js"></script>                        
    </head>

    <body>
        <div data-role="page" id="page_1">
            <div data-role="header" data-theme="a">

                <!-- 1st LEFT BUTTON FROM THE LEFT -->
                <a href="#" data-icon="arrow-l" data-iconpos="notext" 
                    class="ui-btn-left"></a>

                <!-- 2nd LEFT BUTTON FROM THE LEFT -->
                <a href="#" data-icon="arrow-r" data-iconpos="notext" 
                    class="ui-btn-left" style="margin-left: 30px"></a>

                <!-- HEADER TITLE -->   
                <h1>hello</h1>

                <!--  1st RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="gear" data-iconpos="notext" 
                    class="ui-btn-right"></a>

                <!--  2nd RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="arrow-r" data-iconpos="notext" 
                    class="ui-btn-right" style="margin-right: 30px;"></a>

                <!--  3rd RIGHT BUTTON FROM THE RIGHT -->
                <a href="#" data-icon="arrow-l" data-iconpos="notext" 
                    class="ui-btn-right" style="margin-right: 60px;"></a>

            </div>
        </div>
    </body>
</html>

Here's a screenshot of the example above:

  • In portrait mode:

portrait mode

  • In landscape mode:

landscape mode

Upvotes: 2

Related Questions