离子如何将离子内容与页面底部对齐
离子如何将离子内容与页面底部对齐
提问于 2020-08-13 13:31:05
我正在尝试将消息输入框与页面底部对齐，但似乎无法使其正常工作。我尝试过使用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>ion-footer{
display: flex;
align-items: flex-end;
margin: auto;
padding-top: .5em;
padding-bottom: .5em;
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-13 19:10:38
<ion-footer>不是用来进入<ion-content>的
html文件结构应为
<ion-header>
</ion-header>
<ion-content>
</ion-content>
<ion-footer>
</ion-footer>在你的例子中，你想在内容的底部显示另一个元素，你可以像this..Do一样插入文本区，而不是把ion-row放在ion工具栏内。
<ion-content>
</ion-content>
<ion-footer>
<ion-toolbar>
<ion-textarea maxRows="4" [(ngModel)]="message" placeholder="Write a message"></ion-textarea>
<ion-icon name="paper-plane" slot="end"></ion-icon>
</ion-toolbar>
</ion-footer>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63388678
复制相关文章
相似问题
腾讯云开发者
