5 Replies Latest reply on Mar 16, 2017 1:48 AM by syeda92637207

    Layout issue in phonegap app


      I am new in phonegap. Just followed a tutorial how to make an app by using dreamweaver CC by using jquery mobile page and controls. After building online through phonegap : https://build.phonegap.com/apps  it doesn't look right in mobile when i check in my samsung. It looks it has missed all of the styling and no action is being performed. Did i miss anything?

        • 1. Re: Layout issue in phonegap app
          Chris W. Griffith Adobe Community Professional

          Most likely you have the jQuery and jQuery Mobile libraries referenced externally. I suspect the tutorial was written before some of the new security and whitelisting restrictions were put in place. Without seeing the code or the errors, it is just a guess. You will have to update the config.xml file to allow proper external access. See the docs for more information on this, specifically the whitelist plugin.



          1 person found this helpful
          • 2. Re: Layout issue in phonegap app
            ryanskihead Adobe Employee

            It looks like you're not using a config.xml file at all.. review the docs as mentioned by Chris.


            Also if you are referencing external libraries from the web as mentioned by Chris, you should actually just download and package them into your app to create a better offline experience.

            • 3. Re: Layout issue in phonegap app
              syeda92637207 Level 1

              After adding config.xml it seems my icons are no more working. Do i need to download icons and upload with my build as well?  XML has icons path like: res/icon/android/icon-36-ldpi.png which doesn't exist in my folder and i assume default icons should be picked up automatically depending upon the platform i use.


              Secondly, is there any guide or reference of adding platform related controls like next , previous or any default controls related to platform? like i added below for back:


              <div id="dashboard" data-add-back-btn="true" data-role="page" data-theme="a">

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

              • 4. Re: Layout issue in phonegap app
                ryanskihead Adobe Employee

                If you haven't created icons/splash screen images for your app, then you should completely omit the icon/splash screens. PGB will then use some default images.


                It sounds like you need to get a better feel for how a Phonegap app is structured as a whole. Spend some time looking at the documentation. Specifically the icon / splash documentation.


                Here's an app that has the icons and other things set up properly.


                Here's a barebones config.xml. Since you're starting from scratch, it might be a better place to start:


                <?xml version="1.0" encoding="UTF-8"?>

                <widget xmlns    = "http://www.w3.org/ns/widgets"

                        xmlns:gap = "http://phonegap.com/ns/1.0"

                        xmlns:android  = "http://schemas.android.com/apk/res/android"

                        id        = "com.phonegap.myapp"

                        version  = "2.0.1">

                    <name>My Phonegap App</name>



                        Its an app.



                    <author  email="your@email.com">




                    <preference name="phonegap-version"          value="cli-6.5.0" />



                • 5. Re: Layout issue in phonegap app
                  syeda92637207 Level 1

                  I have used this basic config.xml file but icons still not appearing. I have checked in android and ios but no luck. I was assuming it will pick up platform related icons automatically if i don't add icons myself in the build.