Home/ Questions/Q 8629625
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:51:15+00:00

I have a right log off button in my header on each page which

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0