CODEWITHSUNDEEP
jqueryjquery-mobilecordovaibm-mobilefirst
Jimmy
Jimmy

Reputation: 16428

jQuery Mobile on PhoneGap/Cordova shrinking all content into small space at top, only on devices

I'm attempting to build a PhoneGap/Cordova app on the IBM Worklight platform using jQuery Mobile, and am having some very strange behaviour in the output that is being generated.

The preview of my app appears OK in Eclipse and a desktop web browser, however when I deploy to a device it appears that the header and content divs are squeezed into a very small space at the top of the screen, as shown below

enter image description here

I'm really at a loss as to why this is happening, I've asked on the Worklight forums but none of the responses there have helped, I'm wondering if its an issue specific to jQuery Mobile?

Steps to reproduce:

  1. Create a new project
  2. Copy in the code pasted below for enter.html
  3. Copy in the code pasted below for home.html
  4. Tweak locations for css/js files
  5. Build and deploy app
  6. Observe the same behaviour as shown in the screenshot

I'm running these versions :

Could there be a conflict between the body element and the jQuery div element both attempting to use the id of "content"?

enter.html

<!DOCTYPE html>     
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
        <title>Enter</title>
        <link rel="shortcut icon" href="images/favicon.png" />
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />

        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    </head>
    <body onload="WL.Client.init({})" id="content" style="display: none">

        <div data-role="page" id="enterPage">

            <div data-role="header">
                <h1>AppHeaderHere</h1>
            </div><!-- /header -->

            <div data-role="content">
                <h4 id="eventId">body here</h4>
                <p>

                <a href="home.html" data-role="button">Enter</a>

                Some filler text here, this would be the actual body content
                </p>
            </div><!-- /content -->

            <div data-role="footer" data-position="fixed">
                <h4>Footer here</h4>
            </div>

        </div><!-- /page -->

        <script src="js/MyApp.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/auth.js"></script>
        <script src="js/jquery/jquery-1.7.2.min.js"></script>
        <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
    </body>
</html>

home.html

<!DOCTYPE html> 
<html> 
    <head> 
        <title>Home</title> 
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />    
    </head> 
    <body onload="WL.Client.init({})"  id="content" style="display: none"> 

        <div data-role="page" id="homePage">

            <div data-role="header">
                <h1>Home</h1>
            </div><!-- /header -->

            <div data-role="content">
                <h4 id="eventId">Some header</h4>
                <p>
                Body content goes here
                </p>
            </div><!-- /content -->

            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="home.html" class="ui-btn-active">Home</a></li>
                        <li><a href="page1.html">page1</a></li>
                        <li><a href="page2.html">page2</a></li>
                        <li><a href="page3.html">page3</a></li>
                        <li><a href="page4.html">page4</a></li>
                    </ul>
                </div>
            </div>

        </div><!-- /page -->

        <script src="js/MyApp.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/auth.js"></script>
        <script src="js/jquery/jquery-1.7.2.min.js"></script>
        <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
    </body>
</html>

Upvotes: 0

Views: 819

Answers (1)

Raanan Avidor
Raanan Avidor

Reputation: 3583

The preview you are using is changing on the fly the CSS of your HTML body. There is a bug there.

If you will Firebug or any similar tool you will see it gives the body a height auto, that overrules the jQuery Mobile CSS. Just comment out the inline CSS and it will work.

Upvotes: 1

Related Questions