Question

我正在使用离子2并试图创建聊天风格的布局。我目前的HTML看起来像

<ion-footer>
    <ion-grid>
        <ion-row>
        <ion-col col-9>
            <ion-input type="text" placeholder="start typing..." ></ion-input>
        </ion-col>
        <ion-col col-3 align-self-end>
        <ion-buttons end>
            <button ion-button icon-only>
                <ion-icon name="ios-send" ></ion-icon>
            </button>
            </ion-buttons>
        </ion-col></ion-row>
    </ion-grid>

</ion-footer>

这个呈现输入框然后是发送按钮。我试图拉伸输入框以占用整个空间，只需很小的余量然后按钮。

如果我删除整个网格或尝试将输入和按钮放在一个列中，则该按钮会转到下一行。

Answer 1

在.html

<ion-footer>
<ion-input type="text" placeholder="start typing..."></ion-input>

<ion-buttons end>
    <button ion-button icon-only>
            <ion-icon name="ios-send" ></ion-icon>
        </button>
</ion-buttons>
</ion-footer>

并在.scss

ion-input {
    position: absolute;
    width: 88%;
}

拉伸输入框以填充空间，直到按钮使用离子2

1 个答案: