Moving the contents of the page up when mobile keyboard is shown

Question

How do I move the contents of the page up when the mobile keyboard is shown? Right now on Safari in IOS native, when the mobile keyboard is shown, the keyboard covers the input box. I need to make sure it doesn't cover the input box.

Normally it doesn’t cover the input. But if you have added some fancy css/html it does. The culprit here is the css/html you used. For example adding negative margins, weird use of `position` and the like. So the problem is caused by your use of css and html. Since you don’t post any of those, and not even a minimal reproducible example, nobody can help you with this. — Klaassiek, Jul 26 '23 at 21:53
We use vh to specify the height of our app. Do you think that’s it? @Klaassiek — Rue Vitale, Jul 26 '23 at 22:21
There is a bunch of other viewport units that *might* help: https://ishadeed.com/article/new-viewport-units/ — Danny '365CSI' Engelman, Jul 27 '23 at 07:01

score 2 · Accepted Answer · answered Jul 27 '23 at 07:38

In Android if you are using native webview there is simply No WAY to move content up to show Input Field. One hack to achieve this is to calculate your views height and add Padding to bottom like this:

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    // Call to monitor state od keyboard
    Handler(Looper.getMainLooper()).postDelayed({ monitorKeyboardState() },500)
}


private fun monitorKeyboardState() {
    pActivity?.let {

        //Getting  Status bar height
        val statusBarHeightInPx = dpToPx((it.statusBarHeight))

        //Getting  Tool bar height
        val toolBarHeight = binding.webViewToolbar.height
        binding.webViewMainLayout.let {
            it.viewTreeObserver.addOnGlobalLayoutListener {

                val r = Rect()
                it.getWindowVisibleDisplayFrame(r)

                //Calculating Differences

                val heightDiff =
                    it.rootView.height - r.height() - statusBarHeightInPx - toolBarHeight

                //Adding padding bottom
                Handler(Looper.getMainLooper()).post {
                    it.setPadding(
                        0,
                        0,
                        0,
                        heightDiff.toInt()
                    )
                }
            }
        }
    }
}


private fun dpToPx(valueInDp: Float): Float {
    val metrics: DisplayMetrics? = context?.resources?.displayMetrics
    return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, valueInDp, metrics)
}

score 0 · Answer 2 · answered Jul 27 '23 at 06:13

Depending on your browser and mobile browser, 100vh can be different when the keyboard opens. Plus, 100vh is not always 100% of your viewport. It can be tricky. But, you did not share any code, thus I give you some hints here:

See these:

Moving the contents of the page up when mobile keyboard is shown

2 Answers2