이오니아 2 : 베타 8 - 스크롤 가능한 콘텐츠 영역 하단의 버튼 줄이기

Question

Q) 최신 Ionic 2 Beta 8에서 내 버튼이 갑자기 끊어지는 이유를 아는 사람이 있습니까?

참고 : 나는 상단에있는 ion-toolbar을 주석 때, 버튼은

당신은 버튼을 iOS에서 부분적으로 볼 수 있음을 알 수 완전히 볼 수 있지만 모두에를 기계적 인조 인간.

은 여기 내 간단한 템플릿 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

어쩌면이 말이 없지만, 무슨 일이 모든 이온 후

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

에 대한 div

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

의사가 말하기를

툴바는

위나 콘텐츠

아래에 위치되고, 아마도 그 문제를 회피 버튼을 포함하는 콘텐츠를 강제 할 수있는 일반적인 바있다. 새로운 내용의 도구 모음 을 이온 함유량 안에 넣어 두는 것을 잊지 마십시오. plunker와 works에서 테스트되었지만 솔직히 그것이 당신의 프로젝트에서 효과가 있는지 알 수 없습니다.

코드는 다음과 같습니다

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