CODEWITHSUNDEEP
jqueryjquery-mobile
janot
janot

Reputation: 14532

JQuery Mobile header displayed incorrectly

I've just copied one of my previously created pages (where header is shown normally), removed unneeded content and changed it's id:

enter image description here

<div data-role="page" id="page_web" data-add-back-btn="true">
    <div data-role="header" data-position="fixed" data-tap-toggle="false">headerheaderheaderheader</div>
    <div data-role="content">
        content
    </div>
    <div data-role="footer">
        <div data-role="navbar" data-position="fixed" data-tap-toggle="false">
            <ul>
                <li><a href="#page_home" data-icon="home">Home</a></li>
                <li><a href="#page_favorites" data-icon="star">Favorites</a></li>
                <li><a href="#page_settings" data-icon="gear">Settings</a></li>
            </ul>
        </div>
    </div>
</div>

page is called like that:

$("#some_button").on("vclick", function ()
    {
        $.mobile.changePage("#page_web");
    });

Upvotes: 0

Views: 47

Answers (2)

ULLAS MOHAN.V
ULLAS MOHAN.V

Reputation: 1531

Try with this. 

   <div data-role="header">
   <a href="#" data-icon="arrow-l">Back</a>
   <h1>headerheaderheaderheader</h1>
   </div>

And check the API : api.jquerymobile.com/header

Upvotes: 1

Omar
Omar

Reputation: 31732

Header's title should be placed inside h1 - h6 tag.

<div data-role="header" data-position="fixed" data-tap-toggle="false">
  <h1>Header</h1>
</div>

Upvotes: 0

Related Questions