Have you find a problem where there is a set component on mobile, and also when the key-board is triggered, that component will be concealed beneath the key-board?
This has actually been a default actions on the internet for many years. In this short article, we’ll discover the issue, why it takes place, and also exactly how we can address it today with the online key-board API.
Allow’s dive in.
The issue
Prior to diving right into the great information, allow us go through an instance. This is a UI that has the following:
- Sticky header
- Sticky drifting activity switch (FAB)
When the individual concentrates on the input, the online key-board will certainly reveal. Can you anticipate what will take place?
The internet browser will certainly scroll upwards to make the input over the key-board, and also hence the sticky header and also drifting switch will certainly vanish.
It looks comparable to the following:
This is a default actions in mobile web browsers generally. From a UX perspective, it may be frustrating to conceal components of the UI, particularly those components that belong to the present activity I’m doing while the key-board is energetic.
Behind the scenes, what takes place is something comparable to the complying with number.
In technological terms, the noticeable component is called the aesthetic viewport, and also the concealed components in addition to what’s presently noticeable is the design viewport
The major issue is that the aesthetic viewport diminishes in dimension when the online key-board is energetic.
Deal with material concealed under the key-board with the online key-board API
Many thanks to the online key-board API, we can specify that both the aesthetic and also design viewports are equivalent. Keeping that, we can discover the key-board setting and also measurements with the complying with CSS atmosphere variables:
- keyboard-inset-top
- keyboard-inset-right
- keyboard-inset-bottom
- keyboard-inset-left
- keyboard-inset-width
- keyboard-inset-height
By utilizing the above variables, we can modify a design when the online key-board is energetic.
Web browser assistance
At the time of creating this short article, the VirtualKeyboard API is sustained just in Chrome for Android.
In the following area, I will certainly discover a couple of instances and also use-cases where it can be useful.
Allowing the online key-board API
This API isn’t readily available by default. We require to utilize Javascript to allow it.
See the following:
if (" virtualKeyboard" in navigator) {
navigator virtualKeyboard overlaysContent = real
}
I located this a little bit unusual; utilizing Javascript to allow such actions. I concur with Bramus in his short article concerning the subject. He recommended utilizing a meta tag such as this:
<
