Ionic representations differ in browser and simulator
I have developed an application, but there is a difference in the placement of the search box under the subtitle when run in both browser and emulator. Any idea why this is happening?
HTML Template
<ion-header-bar style="color: black; border-bottom: 2px solid #ed1b24 "class="bar bar-light bar-subheader">
<div class="title">
Home
</div>
<div class="buttons">
<button style="color: #ed1b24;" class="button button-icon icon ion-ios-shuffle-strong" ng-click="isClick=!isClick"></button>
</div>
</ion-header-bar>
<div class="fixed-header my-video" >
<label class="item-input-wrapper search-box-label">
<input type="text" placeholder="Search" ng-model="search">
</label>
</div>
<ion-content class="ion-content-below-my-video has-footer">.....
CSS
.fixed-header{
margin-top: 88px;
/* @in height,
put your content below the header bar.
*/
}
.my-video
{
width: 100%;
position: absolute;
background: #ed1b24;
color: red;
text-align: center;
padding: 5px;
}
.ion-content-below-my-video{
margin-top: 40px!important;
}
source to share
It looks like a CSS mismatch between the iOS web browser and your browser.
You should not use a custom input field for search, it is highly recommended to use an existing element <ion-searchbar>
.
Also make sure you are not using a very old version of iOS in your emulator. Consider linking WKWebview
in your application if you haven't already. IOS apps, especially on older devices, benefit greatly from this, although they increase the size of the cordova bundle significantly.
source to share