Bootstrap modal position in WebView UI (relative to container not screen)

[codaapps]

Hi all,

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 long web-page, in mobile/responsive mode on the web or mobile browser- the issue does not exist – only in App 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 webview window and not the mobile screen (or app window/container), so if it scrolls down, the modals goes up with the page, inside the app cotainer.

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). This is a test page – long text, with buttons down to the bottom. so when you are half way down, press the button to open the modal, and in webview – you will NOT see the popup unless you scroll back up.
LINK: https://www.dormi.co.il/users/test222.html
If anyone needs, i can load a test page into my app and test.

I’ve been posting about this issue all over (stackoverflow, fiverr specialists, colorbox plugin, bootstrap github etc) but no one seem to be able to help (even though they are SURE its an easy fix, when i explain the issue. So hoping the smart folks here can help!
Thanks.

[uxfed]

The first thing I thought is maybe it was a browser support issue, but position: fixed has been around for awhile now and you would think WebView would support it as well (you could easily test this with fixed items elsewhere in your app).

I know mobile platforms in the past have had issues correctly implementing that particular style – sometimes fixed would be interpreted as absolute. It was kinda finniky, but my understanding was that it had been sorted out.

I can’t speak to WebView in particular, but if it’s working on every other platform I’d suggest you’re fine. I’ve looked at the code in your example and it seems pretty boilerplate – nothing wrong with it. The only thing I’d suggest is to check out Bootstrap’s vertically centered example at https://getbootstrap.com/docs/4.3/components/modal/#vertically-centered.

[codaapps]

Thanks @uxfed

Yes – this seems to work in all other browsers.
I loaded the Bootstrap sample you linked to into the app, here too it does not work as it should, opening centered, vertically – in relative to the screen – but rather vertically centered in relation to the entire page length, so the modal actually opens BELOW the fold in this case.

Really seems to be an issue with the WebView container, and how it does not know to position items in reference to the container, but the inner content (the web “page” thats loaded).

I’m really surprised that there is so little info on this issue out there.

[codaapps]

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.

[uxfed]

When you say the pull to refresh module was “fixed”, do you mean “removed”?

[codaapps]

no – the developer left that module in, but said there was some big in it, he fixed that and all’s good.

[Author]

Posts