- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
've created a demo app with XDK. I am using grids to center the controls on the page. When I am running in XDK emulator, the controls appear fine, and same for the GenyMotion VM running droid.
But When I am installing the application on a real android phone, the alignments are completely destroyed.
I am having a real hard time figuring out what is going wrong!!
I am attaching screenshots to depict the scenario :
1) The app in designer :
2) The app in XDK emulator :
3) The same app in Micromax Canvas-HD :
Code :
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/index_main.less.css" class="main-less"> <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=no"> <script src="intelxdk.js"></script> <script src="cordova.js"></script> <script src="xhr.js"></script> <script src="xdk/init-dev.js"></script> <script type="application/javascript" src="js/app.js"></script> <script type="application/javascript" src="js/init-app.js"></script> <script type="application/javascript" src="lib/jquery.min.js"></script> <script type="application/javascript" src="js/index_user_scripts.js"></script> <script type="application/javascript" src="marginal/marginal-position.min.js"></script> <script type="application/javascript" src="xdk/appdesigner/js/rest-of-space.js"></script> </head> <body class="row-alignment-1"> <div class="upage" id="mainpage" data-role="page"> <div class="upage-outer"> <div class="uib-header header-bg container-group inner-element uib_w_1" data-uib="layout/header" data-ver="0"> <h2></h2> <div class="widget-container wrapping-col single-centered"></div> <div class="widget-container content-area horiz-area wrapping-col left"></div> <div class="widget-container content-area horiz-area wrapping-col right"></div> </div> <div class="upage-content ac0 content-area vertical-col" id="page_22_9"> <div class="uib-grid widget uib_w_3 grid-text grid-height d-margins" data-uib="layout/grid" data-ver="0"> <div class="uib-grid-row"> <div class="uib-grid-cell widget-container"></div> <div class="uib-grid-cell widget-container"></div> <div class="uib-grid-cell widget-container"></div> </div> <div class="uib-grid-row"> <div class="uib-grid-cell widget-container"></div> <div class="uib-grid-cell widget-container"> <button class="btn widget uib_w_4 d-margins btn-default" data-uib="twitter%20bootstrap/button" data-ver="1" id="btnVerify">Check</button> </div> <div class="uib-grid-cell widget-container"></div> </div> <div class="uib-grid-row"> <div class="uib-grid-cell widget-container"></div> <div class="uib-grid-cell widget-container"></div> <div class="uib-grid-cell widget-container"></div> </div> </div> </div> <div class="uib-footer uib-footer-fixed footer-bg container-group inner-element uib_w_2" data-uib="layout/footer" data-ver="0"> <h2></h2> <div class="widget-container wrapping-col single-centered"></div> <div class="widget-container content-area horiz-area wrapping-col left"></div> <div class="widget-container content-area horiz-area wrapping-col right"></div> </div> </div> </div> </body> </html>
Notice the disparity between the emulator, and the real phone as far as the button placement is concerned!
Whats causing this and how to fix this ?
- Tags:
- HTML5
- Intel® XDK
Link Copied
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Hello,
The grid works fine here at our end. I tested on iOS and Android 4.4 and 5.0 devices. It looks okay. Is there some settings on your phone that are different? What version of Android do you have? Please send your application project zip so I can see if something else is wrong.
Thanks,
Swati
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I've sent your the project.
Thanks for the help.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
I did the crosswalk and you were right. The grids work now!
But here, the Ajax response in a simple alert looks like this :
Ajax is failing in Crosswalk. Is there any version incompatibility with AJAX and Cross-walk ?
*SOLVED*
Cross-Walk version 11 and 12 fails with AJAX.
Version 10 Works!
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Glad it worked for you. For Ajax we have seen issues with using Cordova CLI 4.1.2 on Android 5.0 devices.
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Thanks for the reply.
Not only, 5.0 devices, it often stops working on 4.4.4 devices as well! @Swati
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
Yes, We have observed the issues on some 4.4 devices as well. The fix is being worked out.
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page