如何解决离子如何将离子含量与页面底部对齐
我正在尝试将消息输入框对准页面底部,但似乎无法正常工作。我已经尝试过使用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>
如果要在内容底部显示另一个元素,可以插入这样的文本区域。不要将离子行放在离子工具栏中。
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。