I am creating application for Android using PhoneGap (with jQuery mobile).
I want that after clicking some certain button div overlay would show. It managed it with no problem. The thing is that everything underneath that div should not react on click (should be not accessible at all). Unfortunately all the events can be fired and even input/textarea fields can be edited.
Here is some CSS code for created div:
#shopBoxOuter{
position: fixed;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.3;
}
Is there other option to deal with that? Thanks in advance
That's probably happening because of event propagation. Try binding an on click event to the pop-up, and include event.stopPropagation() or if that doesn't work event.preventDefault(), which cancels the event.
Related
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
I've created a simple text input on my website, and for what ever reason, I am unable to type into it on my phone (OnePlus One running CyanogenMod 13.1.2 - Android 6.0.1).
What happens is when I try to click on the input, the text cursor and keyboard will pop up and disappear in an instant; well before I get a chance to type anything. Only way I am able to select and type anything into it is by rapidly clicking on it until it works properly. I've tried it in Chrome and Firefox and it doesn't work in either. Works fine on desktop, the problem only pops up on my phone.
EDIT** Here is the input's markup
<div class="parent">
<input placeholder="Suburb/Postcode" type="text">
</div>
I have a sneaky suspicion that it may be from the styling so here is the css as well
.parent {
height: unset;
position: relative;
}
input {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5;
user-select: all;
}
Ok, I've figured out a fix, however I'm still unsure as to what the exact problem is. The problem seems to stem from a bit of javascript I wrote that would move the input's parent around the DOM when viewing on smaller devices. I was successfully able to type into the input after doing one of two things. Either I don't move the input's parent - or - after moving the input's parent, I change or remove the parent's id.
I have a local page in android webview, pages's html and body both has width:100%;height:100%;overflow:hidden; , and the #result-popup-wrap has the following css:
#result-popup-wrap {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 245px;
background: #fbfbfb;
border-top: 1px solid #dcd9d5;
-webkit-transform: translateY(100%);
}
but, as you see, when I scroll to bottom of the page, I can see the #result-popup-wrap, which should not be visible.
Any help is appreciated!
Just for anyone who are suffering the same problem.
ADD position:relative to the <body> tag.
Apparently, this is a bug of WebView, on both Android and iOS. On chrome of PC version, page renders OK without body{position:relative;}, but in WebView, you can scroll the entire page, including the 'hidden' #result-popup-wrap.
click here to see demo , pay attention to the UPPER comment in css
you can set body{position:fixed;top:0} to the body.
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
We are using Ajax call to fetch a list of strings and display using a widget on JSP page developed for android web application.
We are facing the issue as strings are displayed limited to the widget’s size and not scrollable in the android emulator. However, the same code works fine in Internet explorer on desktop.
The css used for the above widget is:
jquery-ui-1.8.13.custom.css
Class in the above css specific to widget display:
.ui-autocomplete {
position: absolute;
cursor: default;
max-height: 100px;
overflow-y: auto;
/* prevent horizontal scrollbar */
overflow-x: hidden;
/* add padding to account for vertical scrollbar */
padding-right: 20px;
}
The overflow-y: auto enables the vertical scrollbar in IE but the same doesn’t on Android Emulator.
Any help or pointers to enable the above functionality in android would be great
The Android browser has a bug that causes overflow:auto to be treated as overflow:hidden.
http://code.google.com/p/android/issues/detail?id=2911
I'm not aware of a workaround for this; you might want to reformat the page for mobile.