css - 离子如何将离子含量与页面底部对齐
问题描述
我正在尝试将消息输入框与页面底部对齐,但似乎无法正常工作。我尝试使用 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;
}
解决方案
<ion-footer>
不打算进去<ion-content>
html文件的结构应该是
<ion-header>
</ion-header>
<ion-content>
</ion-content>
<ion-footer>
</ion-footer>
在您的情况下,您想在内容底部显示另一个元素,您可以像这样插入 textarea ..不要将 ion-row 放在 ion-toolbar 内。
<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>
推荐阅读
- c++ - 使用 -static-libstdc++ 时 std::thread 弱,从而导致运行时崩溃
- php - 未读 get_field 和 sub_field 始终返回 null 或 false
- xml - Google 电子表格:来自 Google Drive .txt 的 ImportXML
- reactjs - 用 sinon.fakeTimers 测试 setInterval() 不起作用?
- javascript - AE脚本更改字体样式
- javascript - 为什么 setInterval() 给出循环引用?
- indexof - JMESPath 当前数组索引
- javascript - 提交时表单未进入验证功能
- scala - SparkException:无法及时执行广播
- php - Laravel 模型不保存但它说是(在观察者类内部)