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