Ion - SearchBar too long?

<ion-content padding>
  <ion-searchbar placeholder="Search here ..."></ion-searchbar>

</ion-content>

I have very simple code like this, but somehow, the inner part if the searchbar (<div class="searchbar-input"></div>) is too long and reaches out of the window.

Unbenannt

Behind the scroll bar you can see it.

It seems like its not subtracting its padding-left and padding-right of its width.

So i writed this workaround:

fixSearchBar(){

  let value = document.getElementsByClassName("searchbar-input-container")[0].clientWidth;
  var style = window.getComputedStyle(document.getElementsByClassName("searchbar-input")[0], null);
  value -= parseInt(style.getPropertyValue("padding-left").split("px")[0]);
  value -= parseInt(style.getPropertyValue("padding-right").split("px")[0]);
  document.getElementsByClassName("searchbar-input")[0].setAttribute("style", "width:"+value+"px;")
}

It’s working well but I’m not happy with stuff liek this in my code.

Any ideas about this?

    @ionic/cli-plugin-proxy : 1.4.12
    @ionic/cli-utils        : 1.13.0
    ionic (Ionic CLI)       : 3.13.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3
    Ionic Framework    : ionic-angular 3.7.1

System:

    Node : v6.11.3
    npm  : 3.10.10
    OS   : Windows 10

Misc:

    backend : pro
1 Like

<ion-searchbar> belongs inside <ion-tooolbar> I think. Solved my Problems.