Search code examples
androidbootstrap-4android-webviewgoogle-chrome-app

Bootstrap modal position in WebView UI

Using Bootstrap 4.3.1

On my site, modals work perfectly, in responsive mode too.

I also have an Android app, that among other functions, contains my site in WebView. When I trigger a modal within WebView in the App, on a long page - it opens at the top of the page (not vertically centered) and if you happen to be half scrolled down the page, you will not see it, as the position is fixed to the top, and you now need to scroll UP to see it (if you even know it opened).

Again, in a log web-page, in mobile form - the issue does not exist - only in WebView. Has anyone run into this?

This is Bootstrap's position for the modal.

.modal {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1050;
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
}

It seems that in WebView, the position: fixed; is ignored - as it's relative to the window, so if it scrolls down, the modals goes up with the page.

Tests for this are tricky, as to test properly, you need to test within an app, within a WebView Container (as I mentioned, in Chrome responsive on mobile, this issue does not exist).

Solution

  • I want to post an update and close this question with an update for anyone who runs into this issue in the future. It turned out that there was a bug in the app, and the "pull to refresh" module was interfering with the location of the popups. As soon as that was fixed, the modal opened in its correct position, based on the bootstrap existing code.

    Thanks to all those who tried to help.