Keyboard resizes webview in Phonegap and destroys css layout

Question

I have been struggling to find a solution to my problem for about a week now and still can't find it. Nothing I have found until now worked and I have searched almost everything. My problem is that I have made an app, using Phonegap Build, in which I have an input field and some buttons, divs etc. that are made with percentages in jquery, bootstrap and pure css. When I press the input field in order to write something the screen resizes and makes them smaller. Here is an example:

-This is the app in its normal shape:

-This is how the keyboard resizes the screen and the button & header become smaller:

-This how I want it to look:

The only thing that worked is <preference name="fullscreen" value="true" /> but I don't want the app to be in fullscreen. I am bulding the app for iOS, Android and Windows Phones. Any help will be highly appreciated. Thanks in advance.

Does any of the below solutions helped you? – Bjoerg Oct 01 '15 at 16:14 — Bjoerg, Oct 01 '15 at 16:14

score 0 · Answer 1 · answered Sep 27 '15 at 19:01

0

You should not give height in percentages. Give your header a fixed height (in px for ex. 60px). I would like to see the html and css of your page (mainly the layout).

answered Sep 27 '15 at 19:01

Sandeep

401
3
11

score 0 · Answer 2 · answered Sep 27 '15 at 22:35

@Asdalud,
I completely disagree with Sandeep. Using PX, instead of percentage, subjects the application to future error and the 1024px problem. I would also like to see the HTML and CSS.

However, I from the description of you problem I would say you do NOT know enough about CSS. You need to decide if you want to fix the problem or learn more about CSS.

My random guess is that you are not dealing with psuedo-classes. From your description, I see that the focus event is not covered by your CSS.

To FIX

Let bootstrap handle all your CSS. And abandon all, if not most of your CSS.
OR
Learn more about CSS. (Google: css pseudo classes focus)

Best of Luck

score 0 · Answer 3 · edited May 23 '17 at 11:58

0

First you should set your circle to a absolute position in css:

.circle-class {
  position:absolute; 
  bottom:10px;
}

You have two solutions from here.

1. There is a keyboard plugin here and you have to call

Keyboard.shrinkView(false);

2. You could use the solution from here and set some parameters in config.xml:

<preference name="android-windowSoftInputMode" value="statePan" />

The meta tag in your index.html should be:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

Hope that helps.

edited May 23 '17 at 11:58

Community

1
1

answered Sep 28 '15 at 18:31

Bjoerg

1,229
1
16
32

1

the OP has marked the Question with *Phonegap Build*. You may need to give additional assistance on how to add the elements to config.xml - since AndroidManifest.xml is not available for *Phonegap Build*. – Sep 28 '15 at 21:01
@JesseMonroy650: Thank's for the hint. I did update the solution. – Bjoerg Sep 29 '15 at 08:38

Keyboard resizes webview in Phonegap and destroys css layout

3 Answers3