Ion-input/textarea within an ion-slide doesnt work

ionic-v1
1

Hello,
I have a strange behavior, when i use an ion-textarea or ion-input within an ion-slide:
If i use the input field, the keyboard is shown, but the whole slide is just empty.
If i close the keyboard, the slide is shown normal again.
This happens on Android and on browser (Android). The iOS part in the browser works just fine.

Does anyone know, why this is happening?

Best regards
Skee

2

please show me your code

3

Hi,
Thats my html-code:

<ion-slides #mySlider initialSlide={{this.page}} (ionSlideDidChange)="slideChanged()">

    <ion-slide *ngFor="let a of applications; let i = index">
      <ion-list no-lines>
        <ion-item>
          <ion-label color="darkest" stacked style="font-size: 1.6rem;" class="line-break">Bereich</ion-label>
          <ion-select class="custom" [(ngModel)]="a.jobgroup" [selectOptions]="selectOptionsJobgroup" (ionChange)="onJobgroupChange($event, i)" disabled>
            <ion-option *ngFor="let group_order of groups_order" value="{{job_groups[group_order].id}}">{{job_groups[group_order].name}}</ion-option>
          </ion-select>
        </ion-item>
        <ion-item *ngIf="a.jobgroup">
          <ion-label color="darkest" stacked style="font-size: 1.6rem;" class="line-break">Job</ion-label>
          <ion-select class="custom" text-wrap [(ngModel)]="a.job" [selectOptions]="selectOptionsJobs" disabled>
              <ion-option *ngFor="let job_id of jobs[i]" value="{{job_id}}">{{job_names[job_id].name}}</ion-option>
            </ion-select>
        </ion-item>
        <ion-item>
          <ion-label color="darkest" stacked style="font-size: 1.6rem;" class="line-break">Beschreibung</ion-label>
          <ion-textarea [(ngModel)]="a.description" type="text" rows="5" (ngModelChange)='somethingChanged(i)'></ion-textarea>
        </ion-item>
        <ion-item>
          <button ion-button full large color="an_base" (click)="saveApplication(i)" [disabled]="!changes[i]">xxx</button>
        </ion-item>
      </ion-list>
    </ion-slide>


  </ion-slides>

But i tested it with a plain project and even there the error occurs, if i use a input field within an ion-slide.
I can prevent the error, when i wrap the content of the single slides within a ion-content, but that doesnt feel right…

4

Are you using ionic v1 or v2?
In V1 syntax of input type text is:

And in upper code it is of v2

5

I am using V2

Looks like, something in your posting is missing…

6

Hello,
I just wanted to bring this topic back up, because i didnt found a solution yet.
What i found out additionally is, that his error doesnt happen on all Android devices. At the moment i see the error on Android 6.0 and 5.1. On 7.1 on the other hand, it just works fine.

Anyone has any ideas about this?

7

Hi, I have the same issue :

here is the code:

  <ion-slides>
      <ion-slide *ngFor="let slide of questionset.questions; let qNumber = index;">
        <small>Question {{qNumber + 1}} of {{questionset.questions.length}}</small>
          <h2>{{slide.question}}</h2>
          <ion-list>
            <ng-container *ngFor="let field of slide.fields">
                <ion-list-header>
                  {{field.instructions}}
                  <ion-badge item-end color="primary">{{field.answer}}</ion-badge>
                </ion-list-header>
                <ng-container *ngIf="field.type === 'range'">
                      <ion-item>
                        <ion-range min="{{field.meta.min || '1'}}" max="{{field.meta.max || '10'}}" step="{{field.meta.step || '1'}}" snaps="true" [(ngModel)]="field.answer" color="primary">
                          <ion-icon range-left small color="primary" name="ios-thumbs-down-outline"></ion-icon>
                          <ion-icon range-right color="primary" name="ios-thumbs-up-outline"></ion-icon>
                        </ion-range>
                      </ion-item>
                </ng-container>
                <ng-container *ngIf="field.type === 'textarea'">
                    <ion-label color="primary">{{field.label}}</ion-label>
                    <ion-textarea [(ngModel)]="field.answer"></ion-textarea>
                </ng-container>
            </ng-container>     
           </ion-list> 
        <button *ngIf="qNumber > 0" ion-button (click)="previousSlide()">Previous</button>
        <button *ngIf="qNumber + 1 != questionset.questions.length" ion-button (click)="nextSlide()">Next</button>
        <button *ngIf="qNumber + 1 === questionset.questions.length" ion-button (click)="saveInval(questionset)">Save Data</button>
      </ion-slide>
  </ion-slides>

here is the video showing the behaviour:

many thanks to anyone who can help.