jquery mobile style doesn't work

Question

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>

you are loading both the minimized and development versions of the jQM css and js files. Only load one or the other (.min is probably what you want). — ezanker
– ezanker, Commented Mar 5, 2014 at 14:38

Omar · Accepted Answer · 2014-03-05 14:59:17Z

2

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>

edited Mar 5, 2014 at 14:59

answered Mar 5, 2014 at 14:44

Omar

31.7k9 gold badges73 silver badges117 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Erdem Güngör Over a year ago

i add the data theme and role but still doesn't work :/

Omar Over a year ago

@Erdem in head place the following link <link rel="stylesheet" href="css/jquery.mobile-1.4.2.min.css">, <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script> and last <script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>.

Erdem Güngör Over a year ago

Still the same problem. and i get no errors in my console?!

Omar Over a year ago

@Erdem the button "scan" is styled in your image. Make sure you have elements inside div data-role=page and add data-theme=a.

Erdem Güngör Over a year ago

Thanks omar, i tried a bit and it works now :) Very helpfull from you

Andrei CACIO · Accepted Answer · 2014-03-05 14:35:38Z

0

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.

answered Mar 5, 2014 at 14:35

Andrei CACIO

2,12915 silver badges28 bronze badges

1 Comment

Erdem Güngör Over a year ago

Yeah the files are correctly loaded and i have an extra div with data-role as page.. but still doesn't work

Collectives™ on Stack Overflow

jquery mobile style doesn't work

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related