Cant set top in css on .has-header

ionic-v1
1

Hi

Im trying to change the size of a header bar but and get it working great with ionic serve in chrome but nothing seems to work on iPhone. Content stills hows up 44px down even if i set it to start at 150px down.

  .has-header{
    padding-right: 0;
    top: 154px;
  }`
2

I have no clue why but the top is different on iphone and android so if i set top 80px it will works as top 60px on iphone and top 80 on android.

3

This portion of the ionic.css file should make it clear.

Ionic uses platform detection to decide how tall the header should be. So, to override it, you need to use the entire correct CSS selector.

.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
  height: 64px; }
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
    margin-top: 19px !important; }
  .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
    margin-top: 20px; }
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
  top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
  top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
  top: 108px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-tabs-top {
  top: 113px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top {
  top: 157px; }
.platform-ios.platform-cordova.status-bar-hide {
  margin-bottom: 20px; }
1 Like
4

Thx a lot, that makes it a lot easier to understand :smiley: