Resizing when Android on-screen keyboard appeared

[markgrancapal]

I can't find a work around for this issue, when I open my on-screen keyboard to edit my ion-textarea texts are out of screen because 1/3 of it is occupied by on-screen keyboard but text row count < maxRows so it will not scroll.Now if I set a lower maxRows, it will scroll before it reaches the end of my text-area height. Do you have a solution for this? Something like it can refresh the maxRows value when height of my textarea change or onscreen keyboard is clicked? and thank you for this great project of yours. Appreciate any help.

[chrum]

hey, I will try to investigate it a little bit but it sounds like a pretty tough case :)

[markgrancapal]

hey, I will try to investigate it a little bit but it sounds like a pretty tough case :)

Thank you! Appreciate it. I still can't find a workaround

[chrum]

@markgrancapal can i ask you to create a small demo? when i try to reproduce it i am not 100% that i can see the issue

[jaco-fq]

I'm having a similar issue. When the textarea grows, part of it disappears behind the on-screen keyboard. This may however be a webview issue, and not something wrong with ngx-autosize.

[markgrancapal]

@markgrancapal can i ask you to create a small demo? when i try to reproduce it i am not 100% that i can see the issue

Sorry for the late reply. I will create a small demo for you to test. I'll post it here. Thank you!

[matiasah-ruydo]

We're having the same issue at Ruydo, the text input seems to be under the textarea.

I'll attach a video of the issue: Video.zip

The code where the issue happens is in a component of the page (you can checkout the issue at the site if you want to, just try to make a comment on any post), all of the CSS comes from Tailwind and we're also using the Angular Material text input:

<form #form="ngForm" (ngSubmit)="publish()">
  <div class="flex ml-2 mb-2 py-2 my-2">
    <div class="pb-6 px-2 mr-2 pt-1">
      <div class="w-10">
        <img
          class="h-auto w-auto rounded-full"
          src="{{ auth.userData.photoUrl }}"
        />
      </div>
    </div>
    <div class="flex-1">
      <div class="flex justify-center w-full">
        <mat-form-field class="w-full pb-1" appearance="outline">
          <textarea
            matInput
            name="inputComment"
            #inputCommentForm="ngModel"
            maxlength="1024"
            [(ngModel)]="text"
            placeholder="{{ 'commentPlaceholder' | translate }}"
            autosize
            minRows="1"
            required
          ></textarea>
          <mat-hint align="end">
            {{ inputCommentForm.control.value?.length || 0 }} / 1024
          </mat-hint>
        </mat-form-field>

        <div class="self-end w-12 mb-8">
          <button mat-icon-button type="submit">
            <mat-icon>send</mat-icon>
          </button>
        </div>
      </div>
    </div>
  </div>
</form>

Tested on Chrome 83.0.4103.83, Huawei P Smart 2019.

[chrum]

Hey, I spent this last weekend playing with this problem and cant crack how can i solve it from my autosizing logic :(

maybe someone got some workarounds or something that could point me in some directions? any clues?