Topic: Non-centered modals in WebView
I have MDB 4.8.0 on my site. Opening modals works well.
I also have an Android apps, that amongst other functions, contains my site in WebView. When i trigger a modal window within WebView in the App, on a long page - it opens - but way below the fold. So, instead of it being centered vertically in the visible part of the screen, it opens vertically centered in relation to the entire length of the content - which could be many screens long, most of it hidden.
I hope i have explained myself well enough. If not, pls let me know.
How can this be fixed? I assume its not reading the height of the screen properly?
Thanks
Hi Kneidels,
I'm glad modals work well. If you want to style their position on different window sizes you can always use media queries in CSS to change its behaviour. I created a simple example in our snippet that should work exactly as you planned.
https://mdbootstrap.com/snippets/jquery/pjoter-2-0/861234
The modal will always stay fixed to the window. In my snippet, it doesn't matter how long horizontally or vertically content fo the page is.
Kneidels pro commented 5 years ago
Thanks - in the browser it works great (as mine does) Question is whether it works in the WebView as well - were you able to test it as such?
MDBootstrap staff pro premium priority commented 5 years ago
We grant a test environment in the shape of snippets. We can not grant every single way of testing our product because there are too many of them. I think you need to test it in your environment. I guarantee that it will work because position: fixed is well executed in all modern web browsing options
Kneidels pro commented 5 years ago
The css code you specified for ".modal-content" is supposed to over-write that of bootstrap?
Kneidels pro commented 5 years ago
PS - I added the code you suggested. As before, on Chrome Web, its still fine. BUT, in WebView - 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 (previously, you would need to scroll DOWN).
Hope you understand and can apply a fix to this.
Thanks
MDBootstrap staff pro premium priority commented 5 years ago
Thank you for your contribution. For now, I can not grant you a simple fix to this problem. I thought that my code would fix this behaviour. I added this to our to-do list and we will investigate this issue in the future.
Can you give us more information about the environment you are using this component? How do you generate webView? What type of application are you using? I would like to test it and find a solution.
Kneidels pro commented 5 years ago
Thanks. Its my standard website, which is encased via Android Studio, in an app (view Webview), simply using the domain.
MDBootstrap staff pro premium priority commented 5 years ago
I will proceed with a further test of this behaviour but this process will take some time. Thanks for your information about this topic. We will post information in changelog if we made any changes to Webview browsing. Right now I am not sure why styling the modal doesn't work in your environment. My last advice, for now, is for you to try adding a tag !important to top: 50% in CSS of the modal.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.8.0
- Device: Mobile
- Browser: webview in app
- OS: Android
- Provided sample code: No
- Provided link: No