Ionic 2: Beta 8 - scrollbarer Inhaltsbereich Abschaltknopf am unteren Rand

Question

Q) Wer weiß, warum mein Knopf plötzlich in der neuesten Ionic 2 Beta 8 abgeschnitten wird?

Hinweis: Wenn ich die ion-toolbar an der Spitze aus kommentieren ist die Taste dann vollständig sichtbar

Sie können sehen, dass die Taste auf iOS teilweise sichtbar ist, aber durchaus nicht auf Android.

Hier ist meine einfache Vorlage HTML:

<ion-toolbar header-bg-buildings>  
    <ion-title>{{_I8nService.titles.addBuilding}}</ion-title> 
    <ion-buttons start> 
    <button (click)="cancel()"> 
     <span primary showWhen="ios">{{_I8nService.labels.cancel}}</span> 
     <ion-icon name="md-close" showWhen="android,windows"></ion-icon> 
    </button> 
    </ion-buttons> 
</ion-toolbar> 

<ion-toolbar danger *ngIf="showNoConnectionBar"> 
    <ion-title>{{_I8nService.titles.noConnection}}</ion-title> 
</ion-toolbar> 

<ion-content class="addBuilding">   
    ....   
    <ion-item-group> 
    <ion-item-divider light>{{_I8nService.labels.signed}}:</ion-item-divider> 
    <ion-row> 
     <ion-card class="signed-card"> 
     <ion-card-content> 
      <img src='{{currentUserSignature}}' /> 
     </ion-card-content> 
     </ion-card> 
    </ion-row> 
    </ion-item-group> 

    <div> 
     <button class="submit-button" full complete (click)="createBuilding()">{{_I8nService.labels.createBuilding}}</button> 
    </div> 
</ion-content> 

Answer 1

Vielleicht macht keinen Sinn, aber was passiert, wenn Sie ersetzen die div

<div> 
    <button full complete>Submit</button> 
</div> 

für eine

<ion-toolbar position="bottom"> 
    <button full complete>Submit</button> 
</ion-toolbar> 

Nachdem alle Ionic doc sagt, dass

Eine Toolbar ist ein generischer Bar, die

oberhalb oder unterhalb dem Inhalt positioniert ist

Und vielleicht, dass der Inhalt zwingen könnte, den Knopf zu vermeiden, das Problem zu schließen. Denken Sie daran, diese neue Symbolleiste in den Ionen-Inhalt zu setzen. Getestet auf Ihrem Plunker und funktioniert, aber ehrlich gesagt kann nicht sagen, ob es in Ihrem Projekt funktionieren wird.

Der Code würde wie folgt aussehen:

<ion-toolbar>  
    <ion-title>Page 1</ion-title> 
    <ion-buttons start> 
    <button> 
     <span primary showWhen="ios">cancel</span> 
     <ion-icon name="md-close" showWhen="android,windows"></ion-icon> 
    </button> 
    </ion-buttons> 
</ion-toolbar> 

<ion-content> 

    <ion-item-group> 
    <ion-item-divider light>Some group:</ion-item-divider>  
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 1:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row> 
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 2:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row>  
    </ion-item-group>  

    <ion-item-group> 
    <ion-item-divider light>Some group:</ion-item-divider>  
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 1:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row> 
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 2:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row>  
    </ion-item-group> 

    <ion-item-group> 
    <ion-item-divider light>Some group:</ion-item-divider>  
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 1:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row> 
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 2:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row>  
    </ion-item-group> 

    <ion-item-group> 
    <ion-item-divider light>Some group:</ion-item-divider>  
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 1:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row> 
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 2:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row>  
    </ion-item-group> 

    <ion-item-group> 
    <ion-item-divider light>Some group:</ion-item-divider>  
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 1:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row> 
    <ion-row> 
     <ion-item> 
     <ion-label stacked>field 2:</ion-label> 
     <ion-input></ion-input> 
     </ion-item> 
    </ion-row>  
    </ion-item-group> 


    <ion-toolbar position="bottom"> 
    <button full complete>Submit</button> 
    </ion-toolbar> 
</ion-content>