I have to add extra 20px margin while placing fixed search bar under subheader

ionic-v1
1

Hi, I have a page in which there is a header, a subheader and and fixed search bar outside but when I view it on iphone I have to add extra 20px margin otherwise content overlaps. the extra margin I guess I have to ad is for status bar of iOS based devices. I dont want to add device specific CSS hacks. SO Do you guys have any suggestions?

<ion-view>
  <ion-nav-title align-title="left">
  <img src='img/logo.png' class="logo"/>
</ion-nav-title>
<div class="bar bar-subheader bar-stable">
   //some content here
</div>
<div class="list" style="top:120px;margin-bottom: 0px;">
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="Search">
</label>
</div>
 <ion-content class="has-subheader has-searchbox has-tabs">
2

Without a codepen, I can’t know for sure what your problem is, but don’t be shy about device specific CSS. It will be necessary from time to time. The best way to do it, I’ve found, is to use the .platform-ios class Ionic adds to the body on a device. Something like .platform-ios .has-subheader.has-searchbox{margin-top:20px}. If you provide a codepen, I could offer more specific advice.

3

Thanks for the reply Perry. The problem is that the bug is only reproducible on device and not on browser so codepen will not help but I guess .platform-ios class will help in this regard but to explain it a little more here is the scenario

Before content I have 3 components

  • Header 60px (customized scss and compiled)
  • Subheader 40px
  • Searchbox 34 px
    So in total I have to add 134px margin top to my ion content. This works fine in browser and browser based simulators but when it is run on actual device the content is hidden behind search box for 20px so I have to add 154px on ios instead of original 134px is there a way to do something like if (ios) add 20px to whatever existing height is ?
4

One thing that might help w/ development and tweaking this is ionic serve --lab it’ll open your browser, showing a version that’s much closer to what you’d actually see on device.

5

Thanks a lot perry, adding platform specific css solved the problem, btw is there any documentation on which platform adds what css class ? couldn’t find it in the official documentation

6

There’s not a list, but it’s dynamically generated here. The initial markup will have something like: platform-ios platform-cordova platform-webview. Once the initialization is complete, it’ll add specific version numbers so your body classes will look more like: platform-ios platform-cordova platform-webview grade-a platform-browser platform-ios8 platform-ios8_1 platform-ready