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).
Check this below styles are overwriting from some other styles,
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
looks like a style rendering issue,
I hope it will work for you.
Put it in html javascript tag.
$('#here_put_modal_id').on('shown.bs.modal', function (e) {
// here are code
document.documentElement.scrollTop = 0
})
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.
.edit-wrap
z-index 999
position fixed
left 0
right 0
top 0
bottom 0
overflow hidden
background rgba(0, 0, 0, 0.6)
display flex
.edit-container
background #d1cdb7
padding 1em 2em 1em 2em
margin auto
This stylus demo works on my webview
Related
It's some kind of magic, really. I didn't see anything similar before. So only on Opera Mobile (the latest ver) on the Android device (any), I get a strange white offset while some of the nodes cross the body content width (i.e. became beyond the visible layout). Of course, I don't need any such content, as well as such a white offset.
So I tried to set overflow: hidden as a solution on the parent node(body). Unfortunately, it exactly doesn't work with Opera Mobile (again, the white offset around the page became visible and scrollable).
Exampe of the real code:
#parent_body {
overflow-x: hidden;
overflow-y: scroll;
position: relative;
}
#child_tooltip {
z-index: 99999;
display: table;
}
#tooltip_content {
position: absolute;
z-index: 50;
left: 430px;
top: 175px;
}
Does anyone face such an issue previously? I'll appreciate a lot any help!
Thanks in advance.
Example of such "white offset" around the page:
Most mobile browser will have a default behavior to allow the users to continue scrolling when they reach the top or bottom of a page, leaving a white space on the top or bottom of the page. And then the whole page will bounce back to fill the white space. In native iOS applications, we can easily set images and even interactive elements for these top and bottom areas. I wonder if this can be done for pure web applications.
What I tried is to set background image of html,body, for example:
html, body {
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
}
Unfortunately this didn't work because it seems the enter body was being over scrolled. I wonder if there is a special property we can set for the top and bottom empty over scroll areas for mobile websites.
I also have tried:
html:before, body:before {
width: 100%;
height: 100%;
top: -100%;
position: absolute;
background: url(../img/topnotification.jpg) no-repeat top center;
background-size: contain;
overflow: visible;
}
This apparently didn't work either.
I believe that this depends solely on the browser as I do not know of any html elements that specify white spaces resulting from over scrolling.
Personally I never experienced any thing like this in windows, chrome, and android.
You might be able to create an animation that happens when the scrolling reaches the bottom or the footer of the page, but I do not think anything can be done to fill in the white space. It is mostly likely browser based.
I am trying to place a text input at the bottom of the viewport/screen. It works fine, it even "sticks" to the top of the keyboard after the onfocus event.
When the keyboard is closed, however, there is lag between the changed position (top of keyboard) and the original position (bottom of viewport).
My css for the element is :
.fixed {
position: absolute;
z-index: 1000;
height: 50px;
display: block;
bottom: 0px;
width: 100%;
}
EDIT:
This behavior doesn't depend on fixed/absolute positioning only. Also inputs with position:relative or position:static have the same issue. It seems like the softkeyboard disappears much faster than the screen/browser view can update itself. Seems like a memory issue or a deep bug within Android's default browser (kill me now).
Here are some screenshots.
On focus :
http://i.cubeupload.com/AQS7h8.png
On blur (note the blue screen ± is that a mem issue?):
http://i.cubeupload.com/nV3kMh.png
Had the similar case with android keyboard ruining layout, the following code should work for you.
We are getting current position from top, setting the top style value, and resetting bottom value.
var fixed = document.querySelector(".fixed"),
distanceFromTop = fixed.getBoundingClientRect().top;
fixed.style.top = distanceFromTop + 'px';
fixed.style.bottom = 'auto';
I have an android app that has has this css for the body background:
html, body {
height:100%
margin: 0;
padding: 0;
color: white;
position: static;
text-align:left;
background: URL(images/aVia_Background_new.png) top center black;
background-repeat:no-repeat;
background-size: cover;
background-attachment:fixed !important;
}
When the page is long enough to be scrolled, the background will scroll right off the screen as the page is traversed downward. It acts as though the background-attachment property is set to scroll, but it certainly isn't. The background works properly when the website is viewed in Google Chrome on my desktop, but for some reason when it's translated to Android via Phonegap, it doesn't work properly. Is this a known issue with Phonegap? And does anyone know anything I could try to remedy this? Thanks to any responses. The more ideas the better.
yes.. the problem is with your `background-attachment:fixed;
As far as I know position:fixed is not working fine. I had the same issue while I was trying to do a fixed header/footer in my app. And used iScroll at last
I'm currently developing an responsive website.
I have a very strange problem in Google chrome and on the default android internet browser.
It appears after the website is resized (Making the browser horizontally bigger or change portrait to landscape view on android (over 480 pixels)).
When I resize the browser back to less then 480 pixels a horizontal scrollbar appears.
See for yourself at (loco para saxo .com / new)
The problem is with your css. for navigation You write visibility: hidden; instead of display:none .
.moduletable_shop h3, #navigatie-horizontaal, .logo {
position: absolute;
width: 0;
height: 0;
display: none;
}
Reason to write display:none; because visibility: hidden; hide the element but not remove the element but display:none remove the element.
Dirty way, but it works.
body {
overflow-x: hidden;
}
As sandeep has written, it happens because you use visibility: hidden. If you want to hide stuff, you should use display:none instead. According to w3schools-docs, visibility: hidden is:
The element is invisible (but still takes up space)