Ionic 2：Beta 8 - 底部滾動內容區域切斷按鈕

Question

問）任何人都知道爲什麼我的按鈕突然在最新的Ionic 2 Beta 8中被切斷？

注：當我在上面註釋掉ion-toolbar，該按鈕則完全可見

您可以看到按鈕是iOS上部分可見，但不是在所有的Android系統。

這裏是我的簡單的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

也許這是沒有意義的，但會發生什麼，如果你更換div

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

的

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

所有的離子後doc說

工具欄是位於上方或下方的內容

也許這可能會迫使內容包括按鈕，避免這一問題的一般吧。請記住將新工具欄置於離子內容內。測試你的運動員和工作，但老實說，不知道它是否會在你的項目中工作。

的代碼應該是這樣的：

<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>