CODEWITHSUNDEEP
javascriptjquery-mobile
Levi Hackwith
Levi Hackwith

Reputation: 9332

Jquery Mobile Navbars Padding Wrong: Too Narrow

The Problem:

My navbars look nothing like the navbars in the example at http://jquerymobile.com/test/docs/toolbars/footer-persist-a.html

What am I doing wrong/different?

The JS Fiddle: http://jsfiddle.net/OpnSrce/dUcUF/

The Code:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset = "utf-8">
        <meta name = "viewport" content = "width=device-width, initial-scale=1">
        <title>AD&amp;D Spellbook</title>
        <style>
            @import url('http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.css');
        </style>
        <script src = "http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src = "http://code.jquery.com/mobile/1.1.0-rc.2/jquery.mobile-1.1.0-rc.2.min.js"></script>
    </head>

    <body>
        <div data-role = "page" data-theme = "b">
            <div data-role = "header" data-position = "fixed" data-theme = "b">
            </div>
            <div data-role = "content" data-theme = "b">

            </div>
            <div data-role = "footer" data-position = "fixed" data-theme = "b">
                <div data-role = "navbar">
                    <ul>
                        <li>All Spells</li>
                        <li>Memorized Spells</li>
                        <li>Known Spells</li>
                    </ul>
                </div>
            </div>
        </div>
    </body>
</html>

Upvotes: 1

Views: 219

Answers (1)

codaniel
codaniel

Reputation: 5253

Ok i changed my answer first version was wrong. What your missing is <a> tags in your footer.

<div data-role="navbar">
    <ul>
        <li><a href="">All Spells</a></li>
        <li><a href="">Memorized Spells</a></li>
        <li><a href="">Known Spells</a></li>
    </ul>
</div>

Upvotes: 2

Related Questions