离子 - 改变离子搜索条的宽度-Java 学习之路

我想知道如何在Ionic 3中更改ion-searchbar的宽度及其容器类“toolbar-content”

我可以简单地创建一个具有这些css属性的类来改变搜索栏的宽度：

width: 90%;
margin: auto;

但是，这使其自动生成的容器div仍具有完整的原始宽度 .

以下是上面提到的css搜索栏的样子

enter image description here

但是容器div仍然具有全宽 . （见下图）

enter image description here

如图所示，尽管实际的离子搜索栏宽度发生了变化，但仍然存在一个带有toolbar-content类的div，它不会改变宽度 .

我已经尝试覆盖toolbar-content和toolbar-content-ios类的宽度，但是，这似乎不起作用 .

以下是使用的标头的HTML：

<ion-header>
    <ion-navbar mode="ios">
        <ion-buttons start>
            <button ion-button icon-only>
                <ion-icon name="settings"></ion-icon>
            </button>
        </ion-buttons>
        <ion-searchbar id="home-search" placeholder="Search Groups & Connections" (ionInput)="filterItems($event)" (ionClear)="resetFilter($event)"></ion-searchbar>
        <ion-buttons end>
            <button ion-button icon-only>
                <ion-icon name="add"></ion-icon>
            </button>
        </ion-buttons>
    </ion-navbar>
</ion-header>

非常感谢您的时间和任何建议或指示正确的方向将不胜感激！

1 回答

0
通过将此CSS添加到离子按钮解决了这个问题：
```
margin: auto;
flex-basis: 50px;
```
原来搜索栏将填充剩余空间，两侧的按钮将按照我想要的方式居中 .
回复于 2024-05-17T13:44:22+08:00

离子 - 改变离子搜索条的宽度

1 回答

相关问题