Phonegap : layout breaks when keyboard is shown - javascript

I am experiencing UI issues when the keyboard is opened. When the keyboard is opened,style of all the elements having position : fixed breaks. They appear to be scrolling with the content. Please help me to fix this problem.
The issue exists in iOS 6.1, 7.1

As per documentation link of phonegap build version 3.1, we need to use "KeyboardShrinksView" preferences in config.xml. Set to true to scale down the webview when the keyboard appears, overriding the default beavior that shrinks the viewport vertically. This matches the default behaviour for Android apps.
<preference name="KeyboardShrinksView" value="true"/>
Good luck!

Related

How to avoid bouncing up the elements when typing in input at android web

I have a problem that I can not solve, in Android devices when you put text in the input,
so due to the appearance of the keyboard,
all the elements are popped up - I attached pictures.
How can this problem be solved?
How can I turn off the default css settings of browsers in Android? Because in iOS it works great
Thank you :)
Popping up keyboard is resizing Activity by default, thus it has less space so web content also, and it looks like in your case web content still trying to "fill whole space" trying to align to bottom, center etc. - that depends of params set in CSS
Consider preventing this Activity resizing by android:windowSoftInputMode="adjustNothing" line in manifest
<activity
android:name="your.package.activity.WebActivity"
android:windowSoftInputMode="adjustNothing"
... rest of params
with this line your Activity won't be resized, instead of that keyboard will show up "above" your View (so will cover half of content). you can also try with adjustPan value, for sure not adjustResize. some doc in HERE

Responsive Design Mode on desktop does not behave the same on the actual device

I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.

Rotate 1 screen in React native (both ios and android)

I'm coding an application React-Native in which i need one screen to be locked on landscape (without any action from the user), how can i do this ?
I tried the "transform" props but couldn't manage to make it works
In Android :
Navigate to the AndroidManifest.xml file. the path is android/app/src/main and set android:screenOrientation to the landscape.
In iOS:
Open iOS folder of your project with Xcode. In general tab, find device orientation and set it to landscape left or right.
The abovementioned is ok to change the orientation of all the screens. if you need to change one particular page only, you can use this library.

On-screen keyboard resizes app when an input box is selected Apache Cordova Visual Studio?

I am trying to develop an app with the Apache Cordova tools for Visual Studio and i believed i had finished the project until I started using it on a device and the on-screen keyboard re-sized the entire app when it popped up. The application looks the way i would like it to until the user selects an input box and the on-screen keyboard pops up, which then makes the screen shrink to compensate for the keyboard.
How can I make it so that the keyboard just overlaps the layout already present instead of re-sizing it and making a new one? I can't seem to find any solutions on the internet so any help would be greatly appreciated.
Thanks
Dustin - you need to use the Keyboard plug-in to help customize this behavior. You can find the plug-in at NPM: https://www.npmjs.com/package/cordova-plugin-keyboard
The exact line of code that will give you what you want is:
Keyboard.shrinkView(false);
Cheers,
Kirupa

Reset / change zoom via javascript on Mobile Safari Web App

This issue has been discussed here before, however, I don't get the suggested solution to work.
I want to change the scale / zoom of a webpage on a mobile safari via JS. The solution suggested by
How can I use JavaScript to set the zoom level on mobile safari?
Mobile Safari Web App Zoom issue
Is is possible to change page zoom in Mobile Safari via Javascript?
is to set the "viewport" meta tag.
I tried this, but the scale is not changed.
$('meta[name="viewport"]').attr('content', 'width=device-width, user-scalable:no');
When does safari interpret the viewport setting? Only when loading a page or also when the value is changed programmatically (what I would expect with repsect to the answers of the questions mentioned above)?
Did this behaviour change in some iOS version?
BTW: Where can a find a list of recognized arguments for viewport?
Many thanks for any suggestion!

Categories