CODEWITHSUNDEEP
htmlcssionic-frameworkionic2ionic3
Biggytiny
Biggytiny

Reputation: 529

Ionic - Changing width of ion-searchbar

I am wondering how I can change the width of an ion-searchbar and its container class "toolbar-content" in Ionic 3

I can simply create a class with these css attributes to alter the width of just the searchbar:

width: 90%;
margin: auto;

However, this leaves its auto-generated container div to still have the full original width.

Here is what the searchbar looks like with the css mentioned above

enter image description here

However the container div still has the full width. (see image below)

enter image description here

As seen in the images, despite the actual ion-searchbar width changing, there is still a div with the toolbar-content class that does not change width.

I have tried overriding the width of the toolbar-content and toolbar-content-ios classes, however, this does not seem to work.

Here is the HTML for the header that is used:

<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>

Thank you very much for your time and any suggestions or pointers in the right direction would be greatly appreciated!

Upvotes: 0

Views: 6951

Answers (1)

Biggytiny
Biggytiny

Reputation: 529

Solved it by adding this CSS to the ion-buttons:

margin: auto;
flex-basis: 50px;

Turns out the search bar will then fill the remaining space and the buttons on either side will be centered like I wanted.

Upvotes: 1

Related Questions