-
Notifications
You must be signed in to change notification settings - Fork 13.5k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ionic 2 On-Screen Keyboard Covers Focused Input Element Inside Grid Component #10629
Comments
I'm having the same problem on Android. Post on forum: https://forum.ionicframework.com/t/android-keyboard-is-over-the-input-doesnt-scroll-to-input/81450 (There is no new info there, just to show the problem occurs and to supply another buggy case) |
@AmitMY I also posted a question to the forum, as well as the slack channel. I was able to get the markup to function as expected by rolling back dependencies to "ionic-angular": "2.0.0" and "@ionic/app-scripts": "1.0.0" |
Hi guys. I solved the problem adding the style |
@brunomrpx Thanks! Solved for me also. |
@brunomrpx Thanks. Setting position to initial for ion-col elements fixed the scroll issue for me as well. I'm not sure what course of action should be taken at this point. Since this was working in the 2.0.0 release, i'll leave the issue open. Thanks for your help. |
Note that this is still an issue with release 3.1.0. |
Keyboard is a big priority for us, but understand this is complicated. Fortunately I think all issues will be fixed here: https://github.com/driftyco/ionic/pull/11401/files plus some native assistance in the latest WK plugin |
@manucorporat Do you know when 11401 will be in a release? |
Setting position to initial for ion-col elements worked also for me, few weeks ago.. but now it doesn't anymore (it's been some time since I last tested this). Anyone else has the same? |
@MikeMijnheer What changed? Did you upgrade your ionic version? |
Tbh, I cannot think of anything that changed, I didnt upgrade anything. I still have version 2.2.0. EDIT: Also on IonicView it doesn't work anymore.. |
Any solution on this? |
Any update on this? Having same problem. |
Im also facing this issue with Android. |
I could solve this by adding "scrollAssist: true" and "autoFocusAssist: true" to app.module in the |
@MikeMijnheer It's not working. I solved this problem in iOS using .input-cover{position: static}. But problem still persist in android. |
+1 This is critical for our project. |
same problem for me. Thanks to @brunomrpx it works now, but last grid row still can't really show up, even if everything is pushed up, there would need a few pixels more. Thanks a lot for your answer, with some padding added at the bottom of the ion-grid (for the last row with inputs to show up), it finally worked fine on every row for me, good solution meanwhile, even if adding padding makes the view scroll a bit... |
Same problem. Waiting for solution. Thanx |
Still having the issue... first col works fine but all others not... suggested solutions did not work on Android. |
Any update on this one? |
Did you guys try this: for me it worked for iOS, Still need the solution for android |
Got the same issue. Any solutions for android? The solution from @brunomrpx with the initial to ion-col did work for one page. thanks mate.
Thats where it doesnt work. |
Same Issue. EDIT: |
@viveksinha9 |
.col { in app.scss worked for me. Thanks. |
Why is this still an open issue? This is ridiculous! We know you're all working super hard and appreciate it, but this is such a basic piece of functionality for the framework that needs to be prioritised over offering cloud services and PWAs etc. I've got similar outstanding tickets with no reply and they're just as fundamental. People will start abandoning your platform for React Native or NativeScript or A.N.Other framework if basic functionality like this isn't right. It's crucial to apps being usable and marketable. Please advise. Thanks. |
I totally agree with @daveshirman My problem from 26th july still exists. you can also see that the header moves up around 6px~ when the keyboard closes and doesn't move back because of this bug. |
After wasting an hour and going through a couple dozen related issues this is what finally worked for me, I'm using the latest ionic. |
any news on this? None of the suggested solutions work for me... the problem is on android, IOS works fine |
As there haven't been a working solution for my special case I did the positioning by myself. Isn't that nice but better than a hidden input field behind the keyboard.
In the HTML assign the id to the highest ion-item.
|
<ion-input type="text" name="username" [(ngModel)]="model.username" (ionFocus)="myfunction();" required> import { Content } from 'ionic-angular'; @ViewChild(Content) content: Content; myfunction(){ |
Thanks to @NagarajVenkatesan and some research, I found a solution for iOS and Android. - iOs :
That's all. - Android :
.ts file :
I use a timeout so the keyboard is active when the code is executed. Obviously the "box.top" value depends on your HTML structure. It looks like, for me, that 10 times the difference between the top of my element and the top of the view (when the keyboard is active) sets the element at a right place. I'll have to do more tests but for now, it's the best solution I found. |
this issue, should not be exist after 1 year, it was 1 year. |
This placed in my app.scss resolves the problem for me
|
@adamdbradley @brandyscarney @manucorporat Is there any news about that? Can someone from Ionic Team advise? |
The Ionic team have very plainly stated they're not releasing any fixes for
the current ionic version and instead focusing on a new release.
There is no point wasting time waiting for a fix on existing issues. Find a
workaround.
Quite a shame but that's the reality.
…On Tue, 10 Apr 2018, 03:45 Felipe Esteves, ***@***.***> wrote:
@adamdbradley <https://github.com/adamdbradley> @brandyscarney
<https://github.com/brandyscarney> @manucorporat
<https://github.com/manucorporat>
Is there any news about that? Can someone from Ionic Team advise?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#10629 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/ANnlXpHaGBPSAaWd-udnepL0LqjV9479ks5tnA7AgaJpZM4MRZO6>
.
|
@daveshirman this is quite disappointing not to say unacceptable. We're using the latest version. Ionic 3. Instead of creating new versions that as a consequence of this type of answer no one would bother to use, your company may should pay attention to retaining existing customers. I have an Ionic Pro Developer Customer and I have 3 apps on Ionic in the last 3 months and the Ionic Team just turn its backs on us? In several situations, I defended Ionic over Reactive Native to get a stupid answer like that. No cool at all. |
@felipegouveiae We have not turned our back on you. We've been working on the 4.0 version of Ionic which contains a lot of bug fixes and improvements to the overall framework. This issue is closed as it's been fixed in the next major release. |
I just want to chime in here. We realize it looks like we haven't been fixing issues or possibly doing much of anything because of the lack of responses on issues. The framework team is a small team - there are currently 9 of us on the framework (which includes the CLI, documentation, Stencil & more). We have a meeting every Monday morning to discuss our week, and we update our public Ionic Framework Meeting notes so others can see what we're focused on. While we could spend more time responding to issues, this would mean we are spending less time making code fixes. In order to fix a lot of the underlying issues, we made the decision to put all of our focus into the next version. Why did we decide to go all in on the next major version? We have spent a lot of our time keeping the framework up-to-date with each release of Angular, trying to decrease startup times, and working on build scripts. The more time we spent on all of this, the less time we had to spend on improving and adding components. In order to solve this, we decided to test out migrating our internal components to use web components. We ended up building a web component compiler called Stencil to make it easier for us to create standards-based web components. What we found is that web components introduce a lot of benefits for both us as open source maintainers and you as an Ionic developer. With the switch to use web components internally startup times have decreased, less code is being shipped, many issues are being fixed indirectly, we are moving towards web standards, we're seeing performance gains that are aligned with Google's requirements for PWAs, we have decoupled ourselves from Angular releases (which means you don't have to wait on us to update!), we've switched to using Angular's tooling and we have gained the ability to support multiple frameworks. I want to clarify that adding support for multiple frameworks does not mean we don't still love or support Angular. We are first and foremost supporting Angular, so much so that we have added support for their router and CLI. We're working hard to make the migration as smooth as possible. We recently released a |
Thanks to @Alex0x47! Great solution! In iOS it worked beautifully, but, for me, in Android, the problem persists... |
I also had issues with the keyboard (cordova-plugin-ionic-keyboard) in ionic3. putting in app.module.ts :
putting in the constructor of app.components.ts :
Then, when we click an input, we catch the event fired when the keyboard is shown, and, use js function scrollIntoView on the focused element, to make it visible in the DOM by scrolling the content. scrollIntoView can be align to top of scroll-content or at the bottom with the keyboard. You can also try to add margin top or bottom at the input by scrolling many px :
|
Hey everyone, i've been struggling with this issue for a long time and this line solved it 👍 |
Ithank you @Nytsee y |
the solution proposed by @brunomrpx worked fine for me! Obrigado cara! Se eu tivesse perto de ti, te pagava uma cerveja! |
none of the answers worked for me when I run ionic serve -l. everything just seems to be perfectly fine when I generate it in apk.. |
@Alex0x47 thanks for your approach! Additionally to your solution I have to add the following line to the app.component.ts
keyboard is an instance of Keyboard from '@Ionic-Angular' |
Here's a directive you can slap on to any div container which will auto adjust the marginBottom to account for the keyboard size (don't use it on ion-content, that wont work, use it on a div or other normal containers)
|
@Alex0x47 Best solution i've found atm thanks a lot man @mhartington Mike i understand ionic team is having higher priorities fixing this issue for the new version , but there's still a lot of people whose are developing their apps using ionic 3, there won't be any kind of fix for this matter? Its really a critical thing. |
Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out. |
Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x
I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/
Current behavior:
![current-keyboard](https://cloud.githubusercontent.com/assets/3696624/23522093/b701f98e-ff4f-11e6-8375-2d1b7bdfdac4.gif)
The onscreen keyboard covers the input element that has focus when used within the grid component.
Expected behavior:
Given an ion-grid component and a series of ion-row and ion-col components. When an ion-input component resides within an ion-col component, the on-screen keyboard should not cover the input element when it has focus.
The below demo does not use the grid/row/col components.
![expected-keyboard](https://cloud.githubusercontent.com/assets/3696624/23521749/40d07b74-ff4e-11e6-9764-32f5875afb2e.gif)
Steps to reproduce:
Use the following code code below to reproduce.
Related code:
Other information:
IOS 10.x. I'm not experiencing the issue in the ionic 2.0.0 environment. Only since i've moved to ionic 2.1.0. I've tried to determine what differences may be present in the generated html, but I do not see any. Ionic-Keyboard plugin is installed with default configuration.
FYI: The issue doesn't occur after rolling back to "ionic-angular": "2.0.0" and "@ionic/app-scripts": "1.0.0"
Ionic info: (run
ionic info
from a terminal/cmd prompt and paste output below):The text was updated successfully, but these errors were encountered: