Keyboard covers the text box which has focus


#1

In my screen the last component is a Input text box and when it has focus. when i click the keyboard it comes up and Covers the Text box where i meant to enter my post.

How can i stop the keyboard from covering my text box

What i am using is

<input type="text" class="newCommentPostTextBox" placeholder="Whats on your mind?" [(ngModel)]="postTextUploaded">

i have also tried with ion-input and does gives the same result

Keyboard shows only half screen meaning the keyboard comes up and i dont see the text box ,instead have to scroll down to see it as i look at the keyboard

any ideas on what i can do to fix this?


#2

I’d say it’s always best to stick to the ionic components as much as poss, so ion-input in this case.

Is this on Android or iOS?


#3

Did use ion input

Same issue

Any ideas or hacks we can try


#4

And the question I asked…?


#5

Judge i am not understanding you

You said, best to stick with native components in this case ion-input

i said, i have tried that and i have the same issue with it, the keyboard overlaps the text box :frowning:

then you say-- Question you asked? – What do you mean.

I can see many people on the web are having this issue, does anyone have a fix for this or something we can try?

Saeed


#6

My question hasn’t changed.
Android or iOS.


#7

O man completely missed that last line question :slight_smile:

Testing on android S7. Haven’t tested on iOS yet

Thanks for helping :slight_smile:


#8

I had a weird one once similar to yours where I would try to auto-focus onto an ion-input box which had the problem on Android.

I had an ‘Add’ button which was used for adding additional email addresses rendered with a custom component.

I tried having it so after creation it would auto-focus on the component’s ion-input, but I couldn’t get it to stretch down far enough without the user scrolling.
In the end I gave up and opted to have a modal to edit an individual record.
If you have a problem with this type of setup - just give up and put the newly created sections into their own tab or whatever.

If not read on…

Something to try: Ionic Plugin Keyboard

If you install this, open up your web inspector when the app is open on your phone, and I suspect cordova.plugins.Keyboard.disableScroll might be where your problem lie. More commands involving the keyboard can be found here…

If you look at the various options you have on the above link you should hopefully find a situation that works for you. Not knowing the full story I think this should be enough for you to resolve.


#9

disable didnt work for me, but i was able to use your link to find a hack

i hid the top section and pushed my text box up when keyboard is on and showed it when it is off.

Thanks for helping :slight_smile:


#11

huh? what is that for?