CODEWITHSUNDEEP
jquerycssjquery-mobilenavbar
Erdem Güngör
Erdem Güngör

Reputation: 877

jquery mobile style doesn't work

Why is my page is looking like this? I am not able to find the problem

enter image description here

Is that all right?

<link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css">
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

HTMl: 

<div data-role="header" style="overflow: hidden;">
        <h1>I'm a header</h1>
        <a href="#" data-icon="gear" class="ui-btn-right">Options</a>
        <div data-role="navbar">
            <ul>
                <li><a href="#">One</a></li>
                <li><a href="#">Two</a></li>
                <li><a href="#">Three</a></li>
            </ul>
        </div>
        <!-- /navbar -->
    </div>

Upvotes: 1

Views: 2303

Answers (2)

Omar
Omar

Reputation: 31732

When using any external widget, you need to add data-theme="a" or "b".

The normal behavior, widgets inherit theme from parent div. however, since parent of external widget is body and body doesn't receive any theme, hence External widgets should be themed. 

<div data-role="header" data-theme="a">
</div>

Upvotes: 2

Andrei CACIO
Andrei CACIO

Reputation: 2119

Check if your javascript files and css files are loaded correctly and if your paths are ok. And you might have forgotten an extra div :

<div data-role="page">
</div>

which is the main div that contains all your html. If these pointers don't work let me know.

Upvotes: 0

Related Questions