Im working on this project for work atm where an e-learning will be played on the samsung galaxy tab. the game is just a website but will be showed as app.
When you log in for the first time you will see a popup with this welcome message, behind it is a black overlay with transparancy.
The problem is that on the PC while on firefox it all works great but on the tablet the Z-index doesnt seem to work. its impossible to debug and I couldnt find any documentation on this issue.
So does anyone know if z-index works differently on the tablet or how do I fix it?
The pop up has z-index 999 and the overlay is z-index 998,
Any ideas on this?
I will continue my search on google and will post all the progress I make.
Edit:
The overlay will be created in Jquery:
var showPopup = '<%=ViewData("showPopup").toString()%>'
if (showPopup == "True") { $('body').prepend('<div class="overlay"></div>'); $('#welcomeBox').show(); }
Solved now, see comment for solution.
Late to the party but, I found the best solution for this was to add -webkit-transform: translate3d(0,0,0); to the item that is absolute positioned and z-indexed.
Has solved my issue every time.
Found the answer,
the answer was partially on stackoverflow can be found here: Android Webkit: Absolutely positioned elements don't respect z-index
The rest was found in an tutorial.
The solution was the following:
I added the overlay in jQuery but the pop up was in the html but just hidden.
so I added that part of the code also to the jQuery check.
To prevent the pop up inheriting the opacity of the overlay I had to use the $('body').prepend again. It all works now.
Related
I'm new to ionic. I began designing and developing my app but I got to a problem very soon. I don't really know how iPhone works because I am only testing this on my android device.
In my app, I am using the starter tabs template with a header at top, tabs at bottom. In one of my nav-views, I have a fixed control area, a scrollable area, and a fixed narrow input area. Below is a simple description of my app layout:
The problem that I'm facing here is when I click on the input area for input, the android keyboard pops up, pushing my scroll area, input area, and tabs upwards so that my screen would look like the following:
This basically "jams" my app appearance. So I came to thinking how others have dealt with it. From googling I found that I could hide things when keyboard is active by giving "hide-on-keyboard-open" class to my divs but this would just display: none while still holding its width, height, and place.
My question is are there any ways to literally "remove" my elements when my keyboard is open and "restore" them when my keyboard is closed? I tried
window.addEventListener('native.keyboardshow', function(){
document.body.classList.add('keyboard-open');
});
if(angular.element(document.querySelector("body")).hasClass("keyboard-open")) {
angular.element(document.querySelector("div.tab-nav.tabs").remove());
}
to add keyboard-open class to my body element and delete my tabs (even though I think I should monitor the tabs' class changes for the remove() action for it to work, but I only found jQuery ways to do it and I believe that's against the rules of angularJS?) but it didn't work.
So, what are the common ways to deal with this? As I kept thinking about it, I believe just removing and restoring certain elements or, whether it's possible or not, having keyboard come on top of the body element (just like z-index differences) wouldn't really be a pretty experience.
Thanks in advance for help.
Well it's never too late to post an answer. I managed to solve this problem based on some of this answers.
My solution:
Index.html
Added a ng-class listening to the showTabs attribute.
<body ng-app="app" ng-cloak ng-class="{ 'is-keyboard-open': showTabs }">
style.css
Added the following snippet so the tabs are hidden in case of keyboard open
.is-keyboard-open .tabs{
display:none;
}
.is-keyboard-open .has-tabs{
bottom:0;
}
app.js
On app.js, in the app.run method, I added the window.eventListener to the native.keyboardshow and hide in order to target in real time whenever the keyboard fires or hides.
Note that I used isAndroid() because I only had this problem in android.
$rootScope.showTabs = true;
if(ionic.Platform.isAndroid()){
window.addEventListener('native.keyboardshow', keyboardShowHandler);
window.addEventListener('native.keyboardhide', keyboardHideHandler);
function keyboardShowHandler(e){
$rootScope.showTabs = true;
}
function keyboardHideHandler(e){
$rootScope.showTabs = false;
}
}
Now everything is working as it should.
Notes: I tried previously:
- add more z-index # .tabs
- target the .tabs via css only
- position: fixed + bottom:0 # tabs
- a lot of answers on ionic forums and stack overflow
This was the best solution I found.
PS: Upvoted this one because I gained some white hairs trying to solve it properly.
I resolved this by "removing" and "restoring" my contents as yurinondual suggests in this link from ionic forum.
The suggestion was via css manipulation:
.keyboard-open .tabs{
display:none;
}
.keyboard-open .has-tabs{
bottom:0;
}
body.keyboard-open .has-footer{
bottom: 0;
}
I have been searching for a solution to this and have been striking out.
I have a JQM/Phonegap app that has a search bar in a Fixed position header. OnKeyup, it hits my API and returns results in a listview that is dynamically created and refreshed.
What my issue is, is that although it looks fine in Chrome when I am testing it, once I build it in phonegap and test on the phone, when you click in the search bar, there's an overlay on the box. Once you scroll through the results, this overlay moves both up and down, depending on your scroll.
I can provide code, but it's really only showing when I build it and test on Android. (4.0.4)
I have tried adding data-tap-toggle="false" to the header and moving the search bar down to the "content" area and changing it to a data-filter="true" UL, with both options, I still get the "bouncing" search input.
Any other thoughts? I've attached an example of how it's looking on the Android.
I finally found an answer for this. Not what I wanted, but here it is.
How can I style an HTML INPUT tag so it maintains CSS when focused on Android 2.2+?
Another solution I found was to implement iscrollview https://github.com/watusi/jquery-mobile-iscrollview iscrollview is basically a library that integrates iscroll and jquery and it does all the nasty lifting for you.
After implementing this, the "bouncing" of the search box went away. YAY
I've run into two issues with dropdown menu items on mobile devices. Specifically:
My nav-collapse isn't shown on the first click of btn-navbar, but only on an iPhone.
While I can toggle dropdowns, I can't click on any dropdown-menu items on mobile devices.
My page is valid on W3 Validator and I have added both the .nav-collapse and .collapse classes to my navbar. Plus everything works fine when resizing the browser window on my laptop.
You can see the live web page here: http://hartmandashboard.com/
Has anyone seen this problem before? Anyone care to offer a potential fix? I'd appreciate any help.
Thanks
Yes, I've seen this before and I saw the issue is on github as well. I don't remember exactly where I found this, but some guy was saying that it was an issue about setting those elements to position: absolute; and that re setting them to static would fix it.
So why don't you go ahead and try this on your custom CSS:
CSS
.dropdown-backdrop {
position: static;
}
Let me know if we're on the same page and this solved your issue.
This was initially a bootstrap problem.
See the fix here: https://github.com/twbs/bootstrap/issues/9543
I need to find a way to programmatically zoom out of a WebView on android. Background: I created a phonegap/cordova web app which has a fixed layout. I am using these settings to proper display of the app across devices:
this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);
this.appView.getSettings().setSupportZoom(true);
this.appView.getSettings().setDefaultZoom(ZoomDensity.FAR);
this.appView.getSettings().setBuiltInZoomControls(true);
this.appView.setInitialScale(0);
So far it worked well until a text input field gains focus. Then the app gets rescaled and its impossible to return to the proper view. I searched and worked on this problem for over a day now tried many possible solutions but none worked for me. The approach I am working now on is to make a native call when the text input field looses focus and then to reset the zoom. But I don't know a way to reset the zoom.
webView.zoomOut(); is too slow and webView.setInitialScale(..); does nothing.
I am looking for something like webView.setZoomLevel(..); or webView.setScale(..); but I can not find it in the api.
Pulling out my hair about this.. Please help.
BTW, my meta viewport setting is
<meta name="viewport" content="width=640,height=device-height,target-densityDpi=device-dpi" />
No answer for this question. I guess there is just no way to set the zoom level other than zooming out using the zoomOut() function. So I had to live with that.
Does one of the responses in this question help?
How to set the initial zoom/width for a webview
Brian first suggested: webview.getSettings().setUseWideViewPort(true);
and then littleFluffyKitty added: using setInitialScale(50) along with other zoom settings.
Good luck and I hope someone with more wisdom than I have gives you a better answer.
When you have some clickable content like <a>, <input> or <area> and before this you have an absolutely positioned element with a bigger z-index, there is the wrong behavior of 'click-through'.
I click on the area where the clickable element is behind the front element. In other browsers there is the right behavior that the click does not go through the front element. But only in Android Browser you can click through the front element and activate the element behind. This is a known bug and you cannot avoid it. It's even in newer versions (I test on 2.3.3 in the official Android emulator).
There are some workarounds described in some forums but none of them worked for me.
I tried to put an <iframe> or an <a> between front and back
I tried to change the DOM so maybe the browsers state is refreshed
I tried to have the back elements be positioned as well
None worked
I'm especially having problems with the image map's area elements.
Has anyone had the same issue and managed to work around it?
I'm specifically interested in solutions which are tested against image maps.
I am wondering about a few things here. First, what is the purpose of having an overlaid image and using the image maps? I see you're including jQuery - can you use the hover event with jQuery to change the orientation of the images and do the swap? What about attaching to the click event for the image map, and checking to see if the lightbox is open. If it is, then return false;.
Just trying to think out loud. Sometimes another take on it can be helpful.
This is a quick blindfolded reply, so let me know if I should expand/fix it further. The general idea being a CSS class for both the hover and focus events that disables pointer interaction.
yourElementClass:focus, yourElementClass:hover {
pointer-events: none;
}
Actually I've managed to avoid it by moving the objects below to let them be not visible.
But in cases similar to yours the only workaround that actually works is to manage all the clicks in jquery (especially the ones on the background) and to bind/unbind the clicks events on needs.
there are also some things that could help on some version/mobiles (but do not solve the problem)
the above item has background:rgba(0,0,0,0.1);
you should put a gif or png as background of the above element (as well as the background color as point 1)
using thouchstart instead of click as bind event sometimes helps.
the actual version of android/browser are not affected with this bug (or at least it never happen to me) but it could be nice to know the affected versions. If someone has a list.