CODEWITHSUNDEEP
javascripthtmlcssiphoneinput
maudulus
maudulus

Reputation: 11025

iPhone keyboard shrinks modal size for web application

I have a site that has a modal on it. When a div is clicked, the modal pops up. There is an input in the modal. When viewing the site on a mobile device, I have an issue where I when the input is clicked, the iPhone keyboard pops up. The modal appears to stay the same size, but if I then close the iPhone keyboard, the modal is shrunken to the screen size minus the keyboard size.

Upvotes: 5

Views: 1317

Answers (2)

Ibanez
Ibanez

Reputation: 409

It is difficult to say without seeing any code, but perhaps you need to add the viewport meta tag?

If you have not already done so, try this:

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

Upvotes: 0

IMI
IMI

Reputation: 2469

There appears to be a bug with iOS and the rendering of position:fixed; elements when using the virtual keyboards.

You should try changing your modal to use position:absolute; and see if that corrects the issue.

You can also try the User Agent Sniffing method here.

Upvotes: 2

Related Questions