CODEWITHSUNDEEP
htmlcsscss-position
Chase
Chase

Reputation: 2316

Position element above mobile keyboard

I'm trying to position an element directly above a mobile keyboard. ie: position absolute/fixed to bottom of page, but pushed up by the keyboard (or pushed up equivalent height of the keyboard).

Usually this is the opposite behavior of what's desired, and there's to be a lot of people fighting to keep bottom elements in place. I feel like I remember fighting those same battle before...

But now that I want it to move, it's not. (of course!)

My focus is iOS Safari for now, but would prefer cross browser.

It seems older versions of iOS changed window.innerHeight when the keyboard opened, for better or worse. But that's no longer the case. Which may explain why I'm not seeing what I expected to see...

I've been playing around with variously positioned parent elements with no luck.

Is this even possible? Or is the keyboard now completely detached from the viewport?

Upvotes: 8

Views: 7678

Answers (3)

Elvin
Elvin

Reputation: 59

It's possible with VisualViewport API now to listen for the viewport change and read it values. In practice, it's not sending events immediately so the experience might be laggy.

Upvotes: 3

Ryan Green
Ryan Green

Reputation: 538

Although you can't fix the element to the keyboard exactly, might I suggest that you may be able to use JavaScript and add a class that raises the fixed element the same height as the keyboard.

The keyboard sizes can be found here: What is the height of iPhone's onscreen keyboard?

Upvotes: 2

Clitson
Clitson

Reputation: 21

It is not possible. The keyboard appears to be its own entity away, or as you said, detached from the viewport.

Upvotes: 2

Related Questions