The input items inside the ion-slide-box is generating a random width (8k-9k) on configuration change. Anyone knows why is this happening?
My code :
<div id="connections" ng-controller="Connections">
<ion-tabs class="tabs-icon-top tabs-balanced">
<ion-tab title="Connections" icon-off="ion-ios-people-outline" icon-on="ion-ios-people" ng-click="changeSection(0)"></ion-tab>
<ion-tab title="Requests" icon-off="ion-ios-personadd-outline" icon-on="ion-ios-personadd" ng-click="changeSection(1)"></ion-tab>
<ion-tab title="Search" icon-off="ion-ios-search" icon-on="ion-ios-search-strong" ng-click="changeSection(2)"></ion-tab>
</ion-tabs>
<ion-slide-box active-slide="activeSlide" on-slide-changed="changeSection($index)">
<ion-slide ng-style="{'width' : deviceWidth + 'px', 'height' : deviceHeight + 'px'}">
<ion-scroll ng-style="{'height' : '100%'}">
test
</ion-scroll>
</ion-slide>
<ion-slide ng-style="{'width' : deviceWidth + 'px', 'height' : deviceHeight + 'px'}">
<ion-scroll ng-style="{'height' : '100%'}">
test
</ion-scroll>
</ion-slide>
<ion-slide ng-style="{'width' : deviceWidth + 'px', 'height' : deviceHeight + 'px'}">
<ion-scroll ng-style="{'height' : '100%'}">
<div class="list list-inset">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" ng-model="searchAllInput" ng-keyup="searchAll(searchAllInput)" placeholder="Search">
</label>
</div>
</ion-scroll>
</ion-slide>
</ion-slide-box>
I put the deviceWidth and deviceHeight manually because the ion-slide-box is not displaying ouside and below the tab
Before rotate :
After rotate :
Thanks in advance!