'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 ?
Link Copied
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!
