Cordova keyboard changes layout - javascript

So I'm making my first Cordova app and I'm trying to create a simple login form. The thing is, when I click an input element, the keyboard pops up. For some reason this makes my whole layout change completely, while it isn't even close to being complicated.
Anyone knows why this occurs?
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:; connect-src https://ikleeralles.nl:*">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<title>Hello World</title>
</head>
<body>
<div class="app-screen">
<div id="result"></div>
<form>
<label for="username">Gebruikersnaam:</label>
<input type="text" class="form-control" id="username">
<label for="password">Wachtwoord:</label>
<input type="password" class="form-control" id="password">
<button type="submit" id="submitForm" class="btn btn-default">Log in</button>
</form>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/post.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
CSS:https://pastebin.com/vDSyqHSu

I'm sure the problem is in min-aspect-ratio: 1/1. Without the keyboard, the aspect ratio is different. Change the rules inside this media query or try to delete it.

This is because on line 20, you have to actually put:
body div.app-screen div.result form {
}
instead of:
.appscreen {
}

Related

Iframe security headers seems to be not working with chrome

I am trying to create a widget where it should be able to reuse as iframe on any other website. it works perfectly on same domain. I tried to use it on different domain.
my iframe code is below,
<iframe id="serviceFrameSend" src="https://cyberglo.com/dyacon/dyaconlive/websiteWidget.php?pid=811addd060d7ae73429a831acae7365c&size=large" width="1000" height="1000" frameborder="0"></iframe>
As I said above when I use this on different domain only part of widget is rendering, it has some Ajax request where it load the bottom part of data. when iframe is loaded on different domain that part isn't working.
But surprisingly its working perfectly on Firefox even on different domain. but no luck with chrome and safari.
Maybe its due the doctype or "Content-Security-Policy", I tried everything without any luck.
here is my header file
<?php header("Access-Control-Allow-Origin: *");
include_once 'version.php';
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta charset="utf-8" name="viewport" content="width=400, initial-scale=1">
<meta http-equiv="Content-Security-Policy" content=" default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';">
<!-- responsive meta tag -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Dyacon Weather Stations</title>
<script src="js/jquery-3.2.1.js"></script>
<script> var sid = <?php echo $stationid;?>; var globals = {};</script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.structure.min.css" type="text/css">
<link rel="stylesheet" href="css/jquery-ui.theme.min.css" type="text/css">
I have added iframe on different domain for texting here
https://noblewebdesign.com/dyacon/widgetTest.php
Your help is really appreciated.

How to use Material Web Components in electron

I'm trying to use the google designer stuff in my application made on electron.
but even installing I can't use the style of the designer material
I installed the package using
npm i material-components-web
My code is as follows:
index.html
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
<title>MyTestApp</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<div class="win">
<div>
<img src="bacground.png"/>
</div>
<div class="Panel">
<div class="Test"></div>
<mwc-textfield class="TextFiledTest" label="Test" icon="event"></mwc-textfield>
</div>
</div>
</div>
</body>
</html>
Can anyone who has used material web components in electron tell me how can I do it to work?
The default content security policy block loading of third party resources. Also, since you already installed npm module for material web components you can load them locally.
To fix this issue:
Update your content security policy header to enable loading the material icon font.
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self';
script-src 'self';
font-src 'self' https://fonts.gstatic.com;
style-src 'self' https://fonts.googleapis.com"
/>
Use the scripts and styles from installed node modules:
<link
rel="stylesheet"
href="node_modules/material-components-web/dist/material-components-web.min.css"
/>
<link
rel="stylesheet"
href="https://fonts.googleapis.com/icon?family=Material+Icons"
/>
<script src="node_modules/material-components-web/dist/material-components-web.min.js"></script>
Also add a local CSS file to fix user agent styles with:
html, body {
width: 100%;
height: 100%;
margin: 0;
}
* { box-sizing: border-box }

Cordova/Phonegap: AJAX calls not working on iOS device

I'm building an app in Cordova/Phonegap for iOS.
I have a login form that works via an AJAX call by passing username + password to a PHP script on my server.
When I run this via localhost on my PC (Chrome, to be specific) it works absolutely fine. The AJAX call is passed onto the PHP, the PHP runs, and the response is returned.
When I run the same instance on my iOS device via the Phonegap testing app, none of the URLs/Forms submit. Nothing web-based works in any way. I have an image on the index.html page which is from an external source and this did not load on iOS.
I figured this would be a permissions issue, so I changed the header to the following:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' data: blob: filesystem: ws: gap: file: cdvfile: https://ssl.gstatic.com *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; child-src *; ">
I also added the following in my config.xml:
<allow-navigation href="*" />
<allow-intent href="*" />
<access origin="*"/>
The idea is that this would let all traffic through (for testing purposes only - I know this is not a good idea from a security perspective).
The image in index.html that's being pulled from a HTTP source, which wasn't being rendered earlier, is working now on my iOS device which is great because it means that the change of permissions has helped, but unfortunately the AJAX is still not working.
Here's what I have in my Index.html:
<html>
<head>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' data: blob: filesystem: ws: gap: file: cdvfile: https://ssl.gstatic.com *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; child-src *; ">
<link rel="stylesheet" type="text/css" href="style/bootstrap.min.css">
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/leaf.css">
<title>App Name</title>
</head>
<body onload="onLoad()">
<img style="width:25%; padding-top:2em;" src="img/logo.png" /> <!-- Local image, which works fine on all devices -->
<img style="width:25%; padding-top:2em;" src="http://www.userlogos.org/files/logos/Karmody/alaTest_Iphone01a.png" /> <!-- external image which didn't work earlier but works now since I changed the header permissions -->
<form id="loginForm" onsubmit='return false;' action="http://LINK TO SERVER/login.php" role="form" method="post" >
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="submit" name="submit" value="Login">
</form>
<h3><a href='http://google.com'>Link to page (Works in browser but not in mobile)</a></h3>
</body>
</html>
And here's my script file:
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
console.log(device.uuid);
}
function onDeviceReady() {
$('#loginForm').submit(function(){
var username = $("[name='username']").val();
var password = $("[name='password']").val();
var dataString = {username: username,password: password};
$.ajax({
type: "POST",
url: "http://LINK TO SERVER/login.php",
data: dataString,
dataType: 'json',
crossDomain: true,
cache: false,
success: function(responseBack){
if(response == "success"){alert("Successfully authenticated.");}
else{alert("Username/password incorrect.");}
}
});
});
}
Any tips for me on what I should troubleshoot in order to get web calls to work?
Thank you!
Issue fixed by enabling jQuery Cors.
$.support.cors = true;

Call phonegap/cordova plugin function within html

I'm very new to javascript and I started to make some practice with Phonegap.
I'm trying to call a plugin function within html but if I call it within a button it works fine:
<button onclick="cordova.plugins.autoStart.disable()">Stop AutoStart</button>
while if I try to call it directly I get: "autoStart is not defined" in the console.
<script type="text/javascript">
cordova.plugins.autoStart.enable();
</script>
How can I call it into html without the button?
Update1:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *" />
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.11.2.min.js"><\/script>')</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
</head>
<body>
<button onclick="cordova.plugins.autoStart.disable()">Stop AutoStart</button>
<div class="perspective">
<img id="box1"/>
<img id="box2"/>
</div>
<p id="date"></p>
<p id="time"></p>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
jQuery(document).ready(function () {
//THE ERROR IS HERE
cordova.plugins.autoStart.enable();
});
</script>
</body>
</html>
When you created your cordova project, whether you did so via Command Line Interface or Phonegap Desktop, an app.js file should have been created as well.
Plugins can only be used after the device is ready, so you should put your code inside of the onDeviceReady() function inside of app.js.

shortest way to automatic update angular cordova app

i have my application built around angularjs#1 using gulp, my final output is 2 javascript files and 2 css files.
this final index.html looks like this
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'self' 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="lib.css">
<link rel="stylesheet" type="text/css" href="app.css">
<title>Momen</title>
<script type="text/javascript" src="lib.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body layout="row" ng-include="'common/body.html'" ng-controller="AppCtrl as app">
</body>
</html>
my question is sometimes i need to push a small update chaning couple lines in app.js
note that i use templateCache so all my html files are also inside my app.js
what is the best way to update app.js on the fly without resubmitting app to apple ?

Categories