小编asd*_*der的帖子

Ionic 如何将离子内容与页面底部对齐

我正在尝试将消息输入框与页面底部对齐,但似乎无法使其工作。我尝试过使用align-self-end并为ion-footer创建一个css类。

<ion-content>
<ion-footer align-self-end>
  <ion-toolbar color="light">
    <ion-row align-self-end>
      <ion-col size="10">
        <ion-textarea auto-grow class="message-input" rows="1" [(ngModel)]="message"></ion-textarea>
      </ion-col>
      <ion-col size="2">
        <ion-button expand="block" fill="clear" color="primary" [disabled]="message === ''" class="msg-btn"
          (click)="sendMessage()">
          <ion-icon name="paper-plane"></ion-icon>
        </ion-button>
      </ion-col>
    </ion-row>
  </ion-toolbar>
</ion-footer> 
</ion-content>
Run Code Online (Sandbox Code Playgroud)
ion-footer{
    display: flex;
    align-items: flex-end;
    margin: auto; 
    padding-top: .5em;
    padding-bottom: .5em;
  }
Run Code Online (Sandbox Code Playgroud)

css angularjs ionic-framework ionic4

4
推荐指数
1
解决办法
5662
查看次数

标签 统计

angularjs ×1

css ×1

ionic-framework ×1

ionic4 ×1