I have a webpapp that require a sticky botton navigation bar that stays at the bottom of the screen. I had taken the easy way out to use
.nav_bar {
width: 100%
position: fixed;
bottom: 0;
}
This has worked for me for all the views in desktop as well as mobile browsers. I had to port it to a webapp and the whole thing seems to break down as soon as I had to pull up the android soft keyboard.
As soon as the soft keyboard in Android is brought up to enter the amount in the text box, it messes up the viewport size of the current and subsequent pages.
Before the keyboard, I checked window.innerHeight and it was 615 which matches the screen size of the phone. After the keyboard is invoked, it suddenly jumps to (644 to 1182 depending on the page length).
Appreciate any help.
Below is the screen grab of the issue.
Try working with soft input methods.
You are using them this way in mafifest file between tag
<activity android:name="ActivityA" android:windowSoftInputMode="adjustResize">
Related
I have a vuejs app and responsive component with a picture with CSS bottom: 0;
There's also an input in the page and when I tap on input on an android phone the keyboard opens and pushes the picture up! It does not behave like that on ios phone!
Any ideas?
You using position relate with value minus
In my AIR mobile application I am trying to resize my application when the softkeyboard is activated so that the bottom of my application will not be covered by the keyboard. From what I have read this is suppose to be the default behavior but I have never been able to get it to work and I have tried everything I have found online, instead the keyboard overlays ontop of the application.
I then decided I would resize my application myself based on the height and y position of the softkeyboard only to find out that the built in AIR methods for determining the height and y position of the keyboard are not correct (YAY). I even tried using a 3rd party ANE for determining the screen height by FreshPlanet and their code does not always return correct values either. I feel like this shouldn't be that hard to figure out but I am stuck. Please help!
TLDR:
How can I resize my application to be the remaining screen space when the softkeyboard is activated?
What renderMode are you using? (in manifest.xml) I found that only cpu is working to get the correct keyboard height.
Also try to set softKeyboardBehavior to none: <softKeyboardBehavior>none</softKeyboardBehavior>
I'm working on a project where I have a stationary bar (to become nav bar), and then directly below it is a rectangle which is setup so that when you click it, it flips over. The width of both the nav and the flipping div are supposed to be the exact same, and they are when viewed in FF, Chrome, Safari, IE...but when I just checked it in the Android browser, the flipping div is about 10 px less in width than the nav bar. I've narrowed this down to the fact that I'm using 'display: table' in the div 'outerContainer' to vertically and horizontally center the contents of 'innerContainer' (which is set to be display: table-cell). This is an example of how I currently have it setup, which displays correctly in all browsers but the width of the flipping box is less in Android browser: http://jsfiddle.net/adRP4/9/
As soon as I remove the 'display:table' from .outerContainer, it displays in the Android browser at the proper width, however the content is no longer centered as I want it. This example shows the display: table removed will the proper width displaying, but the content not centered as I want it: http://jsfiddle.net/adRP4/10/
The vertical/horizontal centering method I used is based on: http://www.andy-howard.com/verticalAndHorizontalAlignment/index.html (similar to http://css-tricks.com/vertically-center-multi-lined-text/) ... when I tried changing it to the method outlined her: http://css-tricks.com/centering-in-the-unknown/ I ran into all kinds of problems...
Any suggestions on how to fix this?
UPDATE (6/28)--I discovered that when I check an iPhone, I have the exact same width mismatch as in the Android browser..
Thanks,
Mark
I'd suggest to use a DIV for the flip, and then, adding a div filling the flip and set as TABLE.
Or I suggest using the floater in the method 3 here : http://blog.themeforest.net/tutorials/vertical-centering-with-css/
When WebView is hardware accelerated, clicking on input field causes keyboard to appear and html is redrawed shifted and duplicated for a moment:
1) When soft keyboard is appearing WebView pans its content to bottom-left, then againt to normal position. Causes short view-able duplication.
2) When changing keyboards (ex. abc->numbers) contents are panned down by keyboard height and then back to normal position. Causes short view-able duplication.
Tested on two Android 4.0 tablets, if hardware accelerations is turned off no such glitches appear.
I failed to found any information on this, has anyone experienced same problem?
So I finally found some solutions:
The entire WebView content moves by layout margin width, so setting it to 0px fixes this problem.
android:windowSoftInputMode="adjustPan" for WebView activity.
I see this debug message frequently in LogCat. When doing swipe or rotating the device for example. The emulator doesn't react to the events then. What does it mean?
In need to test rotation on the emulator but on some versions, when I press CTRL F12 or CTRL F11 nothing happens (well, the device rotates as a whole but not the screen) and I see this message in log. I don't find anything with google either...
Ok, it's PhoneGap specific. I found something in the source code of PhoneGap:
/**
* We are providing this class to detect when the soft keyboard is shown
* and hidden in the web view.
*/
class LinearLayoutSoftKeyboardDetect extends LinearLayout {
private static final String TAG = "SoftKeyboardDetect";
But I'm not doing anything with soft keyboard, I'm just rotating the device. It's a bug maybe?
I can give you the background on this log. There is a bug in Android or maybe they'd call it a lack of feature but there is no event thrown when the keyboard is shown or goes away. This causes a problem for web applications as the keyboard shortens the the screen size. When the screen size becomes smaller then your UI suffers.
In order to be able to react to the keyboard show/hide in PhoneGap Android we implemented the LinearLayoutSoftKeyboardDetect which is basically a LinearLayout but it reacts to changes in the screen size. If you rotate the device the width becomes the height and we can ignore the change but if the height gets dramatically smaller while the width remains the same it is safe to assume there is a keyboard being shown and we throw a show keyboard event. When the height gets dramatically larger while width stays the same we throw a hide keyboard event. Make sense?
This implementation seems affect with the situation -> When native keyboard is pop up it shrink the webview in phonegap. Again demention changes. So it tends to ignore necessary events. I want to detect native keyboard done button press event.