Application Display Issue on iPhone X - ibm-mobilefirst

The application built on MobileFirst (IBM worklight) is not displayed properly on iPhone X simulator.
How can we fix this display issue?
Secondly, Mobilefirst compatible with "safe area" xCode 9 feature?
Please advice.

This is a known issue and is being fixed. Open a PMR with IBM MobileFirst to obtain a fix. Until then , you can use this workaround:
Go to .html page of the application and replace the viewport meta tag by adding the viewport-fit=cover property
Replace
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0, user-scalable=0" name="viewport">
with new tag
<meta content="width=device-width,initial-scale=1.0,viewport-fit=cover,
maximum-scale=1.0,minimum-scale=1.0, user-scalable=0" name="viewport">

Related

How to disable auto zoom in quill editor from react native package?

I am trying to integrate quill editor in my react-native application. I am using
react-native-webview-quilljs package for this.
https://github.com/reggie3/react-native-webview-quilljs
<WebViewQuillJS
defaultContent="sdfsd"
backgroundColor={"#FAEBD7"}
/>
The problem I am facing is the editor is zooming in when I click on editor to type. This behaviour is taking some part of the editor from the right side off the screen and have to scroll. This behaviour is seen only in iOS platform but not in Android.
I found a work around which might not be a good way.
In index.html from the path given bellow, I changed the meta tag
node_modules > react-native-webview-quilljs > assets > index.html
from this
<meta name="viewport" content="width=device-width,initial-scale=1"/>
to
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
if there is any other solution, would be welcome

Bootstrap 3 column grid not working correctly in IE

I am developing a responsive website with angular 7 and Bootstrap 3. Works perfectly on all browser but IE. In IE11, wherever I am using col-lg-12, content goes to the next line.
Add the following code to your head tag
<meta http-equiv="X-UA-Compatible" content="IE=edge">

NoSuchMethodError when executing a recorded test in IBM MobileFirst Test Workbench

Unable to play recorded scripts on an Galaxy S5 with Android 5.0.2.
NoSuchMethodError is thrown when executing a previously recorded test, in IBM MobileFirst Test Workbench.
The same test plays out just fine on other versions of Android.
Following the steps described in
https://developer.ibm.com/mobilefirstplatform/documentation/getting-started-6-3/advanced-topics/testing-mobilefirst-mobile-applications-mobile-test-workbench/
I have created my own MobileFirst project and slightly changed the index.html to:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>hw</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!--
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
-->
<link rel="stylesheet" href="css/main.css">
<script>window.$ = window.jQuery = WLJQ;</script>
<script>
function count_rabbits() {
for(var i=1; i<=3; i++) {
alert("Rabbit "+i+" out of the hat!");
}
}
</script>
<script src="js/tracekit.js" type="text/javascript"></script>
<script src="js/MQA.js" type="text/javascript"></script>
</head>
<body style="display: none;">
<!--application UI goes here-->
Hello MobileFirst
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
<h2>Press the button to start</h2>
<input type="button" onclick="count_rabbits()" value="Count rabbits!"/>
</body>
</html>
</body>
</html>
I built the application and deployed it on a Galaxy S5 with Android 5.0.2.
The application works as expected.
Then I create a Test Workbench project.
Using the IBM Rational Test Workbench client from my phone, I upload my application and I record myself opening it, tapping OK three times and then tapping back, then stop the recording and put it in a test.
The test shows up, I can save it and I can launch it.
Here where it goes offscript.
It runs for a little and it fails with a:
An uncaught exception has been thrown in thread Thread[main,5,main]: NoSuchMethodError: No direct method <init>(Lcom/ibm/rational/test/mobile/android/runtime/webkit/WebViewClientWrapper_rtwrenamed;Ljava/net/HttpURLConnection;Ljava/net/URL;[Ljava/lang/String;Ljava/lang/String;)V in class Lcom/ibm/rational/test/mobile/android/runtime/webkit/WebViewClientWrapper$1; or its super classes (declaration of 'com.ibm.rational.test.mobile.android.runtime.webkit.WebViewClientWrapper$1' appears in /data/app/com.myhw-1/base.apk)
at com.ibm.rational.test.mobile.android.runtime.webkit.WebViewClientWrapper_rtwrenamed.loadRemoteJavascriptsSource(WebViewClientWrapper.java:290)
at com.ibm.rational.test.mobile.android.runtime.webkit.WebViewClientWrapper_rtwrenamed.loadJavaScriptResource(WebViewClientWrapper.java:242)
at com.ibm.rational.test.mobile.android.runtime.webkit.WebViewClientWrapper_rtwrenamed.loadAndInject(WebViewClientWrapper.java:205)
at com.ibm.rational.test.mobile.android.runtime.playback.webkit.RMoTWebDriver$1.run(RMoTWebDriver.java:241)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:145)
at android.app.ActivityThread.main(ActivityThread.java:6066)
at java.lang.reflect.Method.invoke(Native Method)
at java.lang.reflect.Method.invoke(Method.java:372)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1399)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1194)
What am I doing wrong?
Windows 7 64 bit with jdk 1.8.0_77
C:\>java -version
java version "1.8.0_77"
Java(TM) SE Runtime Environment (build 1.8.0_77-b03)
Java HotSpot(TM) 64-Bit Server VM (build 25.77-b03, mixed mode)
C:\>javac -version
javac 1.8.0_77
Luna with:
Android DDMS 23.0.7.2120684
Android Development Tools 23.0.7.2120684
Android Hierarchy Viewer 23.0.7.2120684
Android Native Development Tools 23.0.7.2120684
Android Traceview 23.0.7.2120684
Eclipse IDE for Java Developers 4.4.2.20150219-0708 epp.package.java null
IBM Dojo Mobile Tools 7.1.0.00-20160321-2138
IBM jQuery Mobile Tools 7.1.0.00-20160321-2138
IBM MobileFirst Platform Studio 7.1.0.00-20160321-2138
IBM MobileFirst Platform Test Workbench 8.7.0.v20160112_2203
Tracer for OpenGL ES 23.0.7.2120684
See here: Uploading hybrid app to mobilefirst test workbench fails
it is a known problem that appeared with latest build-tools versions
to make short, RTW uses "dex2jar" and other utility tools, that rely
on android sdk. if sdk evolve (new build-tools for example), these
tools have to be also ugraded (they are embedded in RTW)
Best would be to upgrade RTW to latest version to be able to support
your sdk version (contact IBM support for that. RTW 8702 is available
and 871 should be live around mid october 2015)
a workaround would be to to downgrade your "build-tools" in android
sdk manager to an older version

IE 11 displaying some strange characters in Dojo content pane

I am using Dojo Accordian Container, the content panes inside the accordian are just displaying text. Everything works fine in firefox, chrome except for IE 11. Below are snapshots of the issue
When I do something on the browser, like say If I open developer tools, the correct text gets displayed
Have you tried using this in your HTML??
<META HTTP-EQUIV="X-UA-Compatible" content="IE=Edge" />
I've had many problems with IE and dojo in the past. Firefox and Chrome always seem to work perfectly. It's just a stab in the dark but the line above fixed many similar problems for me.

Why desktop version shown rather than responsive version?

I've used bootstrap 3 in my design to make it responsive. but why does desktop version shown rather than responsive version in mobile/tablet browsers?
Here is my page:
https://payment24.ir/order-physical-visa-master-card/
Is it because of
<meta name="viewport" content="width=device-width; initial-scale=0;user-scalable=1;">
or not? what's wrong?
Yes. Try this:
<meta name="viewport" content="width=device-width, initial-scale=1">