Problem on header input on ios

ionic-v1
1

Hi all, I need some help.

My application has a fixed input in the main header and it works fine on Android (for all the kinds of screen dimensions) and Windows Phone, but it has some distortions on iOS (as shown in the following picture).

image
IMG_0006.PNG640×960 140 KB

The expected behaviour would be (Android):

image
image.png448×655 177 KB

As you can see, the header input on iOS has some problems: it overlaps another button and the input field (“Buscar”) is distorted.

My code for the header bar is:

<ion-nav-bar class="main-bar" style="width:100%; position: relative;">
        <div style="width:9%;">
            <button id="lateralbutton" class="button button-icon button-clear ion-navicon menu-icon" ng-click="lateralMenu()" style="padding: 1% 1% 20% 25%;"></button>
        </div>
        <div class="ppform" style="position: relative; width: 91%;">
            <form ng-submit="makeSearch()" style="width: 100%; height: 100% !important; position: absolute;">
                <div class="bar bar-header item-input-inset menu-input">
                    <div class="item-input-wrapper" style="height: 100%;">
                        <i ng-click="makeSearch()" class="icon ion-android-search menu-icon" style="width:4%"></i>
                        <input type="text" placeholder="Buscar" ng-model="searchMenu.searchContent" style="width: 90%;">
                        <i ng-show="searchMenu.searchContent.length" style="width: 6%;" ng-click="clearSearch()" class="clear-search icon ion-close-round"></i>
                    </div>
                </div>
            </form>
        </div>
    </ion-nav-bar>

Can anyone help me with this issue?
Thanks a lot in advance.

2

Hi @rcnm,
I didnt compare your snippet with this example but maybe it helps,
Take a look at this codepen with input in header bar http://codepen.io/ionic/pen/kdvxp

3

I’ve tried the codepen, but unfortunately it didn’t work.
The header input is still distorted.
Thanks for your quick reply.