CODEWITHSUNDEEP
jquery-mobile
ptamzz
ptamzz

Reputation: 9375

Navbar in jQuery Mobile

I've this navbar at the footer

<footer data-role="footer">
    <div data-role="navbar" data-iconpos="top">
        <ul>
            <li><a href="a.html" class="ui-btn-active" data-icon="star">Fav</a></li>
            <li><a href="b.html" data-icon="back">Recent</a></li>
            <li><a href="a.html" data-icon="delete">Contacts</a></li>
            <li><a href="b.html" data-icon="grid">Keypad</a></li>
            <li><a href="a.html" data-icon="delete">Voicemail</a></li>
        </ul>
    </div><!-- /navbar -->
</footer>

http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html says, the nav bar can take upto 5 items in one line but here, the nav items are assigned with 3 columns layout and the last 2 li items falls down in the second line.

Did I miss something??

enter image description here

Upvotes: 3

Views: 2860

Answers (2)

Shinoj
Shinoj

Reputation: 811

Please try this..

<footer data-role="footer">
    <div data-role="navbar" data-iconpos="top" data-grid="d">
        <ul>
            <li><a href="a.html" class="ui-btn-active" data-icon="star">Fav</a></li>
            <li><a href="b.html" data-icon="back">Recent</a></li>
            <li><a href="a.html" data-icon="delete">Contacts</a></li>
            <li><a href="b.html" data-icon="grid">Keypad</a></li>
            <li><a href="a.html" data-icon="delete">Voicemail</a></li>
        </ul>
    </div><!-- /navbar -->
</footer>

Upvotes: 0

Phill Pafford
Phill Pafford

Reputation: 85378

Try the beat 4.1 instead of the bleeding edge changes.

Instead of using: http://jquerymobile.com/test/#/test/docs/toolbars/docs-navbar.html Try: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html

Live demo using 4.1 beta. Your code works fine: http://jsfiddle.net/BCnBN/

Upvotes: 3

Related Questions