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;
}
Related
Of course there were many similar questions to my problem but none of them worked for me. So,it forced me to open a new question.
So, I am developing an Hybrid mobile app where the main screen contains two independent section with their own input labels. So,when ever the input field got focused the native Android SoftKeyboard pushing the contents of lower section towards up, which eventually decreases the screen size.
Here, I don't want the keyboard to push the content up. The keyboard should be shown but it should be over lay on the section.
I've tried these things already:
android:windowSoftInputMode="adjustNothing", android:windowSoftInputMode="adjustPan" and some jquery code but in vain.
I am not sure it is possible.
However you can work around this, by specifying your element's height with viewport width vw measures.
For example:
div {
height: 40vw;
}
This won't work on landscape however.
You can also hide elements when the keyboard is opened (so instead of them being pushed up, they are just not seen) by assigning the class hide-on-keyboard-open
Like so:
<div class="button hide-on-keyboard-open"></div>
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
Ive used absolute positioning and CSS3 animations so clicking a trigger div makes another animate to cover it. This is working fine except on my fairly old Android phone, when you click the div infront you can sometimes select an option input which is in the div behind it. Ive tried adding a z-index but the issues is still there. Thanks
I was hoping for a CSS solution but ive done it with jQuery. Below are functions that I call to disable / un disable the input so it cant be selected.
function disableInputs () {
$('select').prop("disabled", true);
//alert('disabled');
}
function unDisableInputs () {
$('select').prop("disabled", false);
//alert('un disabled');
}
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.