Home/ Questions/Q 8332463
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T02:43:54+00:00

I’m attempting to build a PhoneGap/Cordova app on the IBM Worklight platform using jQuery

  • 0

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 :

  • IBM Worklight 5.0.1-299-developer-edition
  • jQuery 1.7.2 min
  • jQuery Mobile 1.1.1
  • Eclipse 3.7.2
  • Devices : iPhone 4S, Samsung Galaxy S2 & Galaxy Ace, both running 2.3.3

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0