Reduce the height of ion-searchbar in Ionic 5

Ionic Framework ionic-v3
1

Is there any way to reduce the height of ion-searchbar ? There is no height property mention in the CSS Custom Properties in the docs: https://ionicframework.com/docs/api/searchbar#css-custom-properties

Right now, the only way I managed to do this is by using transform like this:

ion-searchbar {        
  transform: scaleY(0.8);
}

The problem is that this doesn’t keep the correct proportions for the font size.

2

Looks like the Searchbar doesn’t uses the Shadow DOM, so should be able to edit the internal classes just like you want.

3

The element that gives the searchbar style seems to be the input with these classes: .searchbar-input.sc-ion-searchbar-md. However, I cannot change it’s styles. This is my element:

<ion-searchbar id="custom-search"></ion-searchbar>

And this is my style:

#custom-search input.searchbar-input.sc-ion-searchbar-md{

  padding-top: 0!important;

  padding-bottom: 0!important;

}

Nothing different with these styles added

4

where have you added these styles?

5

In the scss file of my page. I’ve added them into my global.scss now and it works as expected

6

Yeah, you can either add them to global.scss or use it like:

#custom-search { 
  &::ng-deep {
    input.searchbar-input.sc-ion-searchbar-md {

      padding-top: 0!important;
      padding-bottom: 0!important;

    }
  }
}

This should work in the Pages’s scss and you have a better overview, because it is in the scss where it belongs to be.

1 Like