Adjust Header Height


#1

Is there a way to adjust the height of the header?

It seems a bit to short on iOS 7 - for example, the hamburger settings icon on the topright is overlapping with the battery icon and the header title is squashed up right next to the time.

I tried overriding the CSS for the bar height and line height but it seemed to cause some bugs especially on the forms so I reverted the changes.

/* makes app buggy so disabled for now */

.bar {
	height:54px;
}

.has-header {
	top: 54px;
}

.bar .title {
	line-height: 54px;
}

.bar .title + .buttons {
	top: 10px;
}

Is there an official/recommended way to adjust the height of the header?


Height on stuff
#2

Just curious, what do you mean the icon are over lapping the status bar icons? Can you provide a screen capture?


#3


#4

Did you start this project from the Ionic CLI or did you include Ionic in a manually? This is because you do not have the proper plugins installed. This should take care of your issue.

$ cordova plugin add org.apache.cordova.device
$ cordova plugin add org.apache.cordova.statusbar

#5

You’re right I installed ionic manually. But I checked and I do have those plugins installed. I tried to reinstall them but no joy.

I had a look at the ionic-app-base repo and copied the config.xml settings. I also copied the app bootsrap code:

.run(function($ionicPlatform) {
	$ionicPlatform.ready(function() {
		if(window.StatusBar) {
			// Set the statusbar to use the default style, tweak this to
			// remove the status bar on iOS or change it to use white instead of dark colors.
			StatusBar.styleDefault();
		}
	});
})

But neither of those worked.

Maybe it’s to do with how I’m loading the dependencies? This is an edited version of my index.html:

    <head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
	<link rel="stylesheet" type="text/css" href="bower_components/ionic/release/css/ionic.css" />
</head>

<body ng-app="titleManager" animation="slide-left-right-ios7">

<!-- views -->
<ion-side-menus>
	<ion-pane ion-side-menu-content>
		<ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>
		<!-- main view -->
		<ion-nav-view></ion-nav-view>
	</ion-pane>

	<ion-side-menu side="right">
		<!-- right menu vie -->
		<ion-nav-view name="sidemenuright"></ion-nav-view>
	</ion-side-menu>
</ion-side-menus>


<!-- bower deps -->
<script src="bower_components/underscore/underscore.js"></script>
<script src="bower_components/angular/angular.js"></script>

<!-- router -->
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>

<!-- ionic -->
<script src="bower_components/ionic/release/js/ionic.js"></script>
<script src="bower_components/ionic/release/js/ionic-angular.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>

<script src="js/app.min.js"></script>
</body>

Then inside the main view:

<ion-view title="register" right-buttons="rightButtons">
	<ion-content has-header="true" has-tabs="true">
		random stuff
	</ion-content>
</ion-view>

#6

Hmm, just curious with that style of markup, what version of Ionic are you using?

Just to be sure that its not a problem with Ionic, can you try to create a project with the CLI and a starter project?


#7

I’m using 0.9.27. I tried upgrading to 1.0 beta but it broke a lot of stuff.

Maybe it’s because of the directives I’m using? Another example of a view displayed within the main view:

<ion-view title="{{ course.id + '_TITLE' | translate }}" right-buttons="rightButtons">
  
  <ion-content has-header="true" padding="true">

    <p>{{ course.id + '_DESC' | translate }}</p>
    <p><a class="button button-small icon ion-arrow-left-b" ui-sref="courses"> {{ 'COURSE_DETAIL_ALL_COURSES' | translate }}</a></p>

   </ion-content>

</ion-view>

I tried a sample app using the CLI and the header problem is fixed. The differences I can spot - it’s using v1 and different markup to what I’m using.


#8

Odd, any custom directives shouldn’t create a problem. The best best I can think is to update your project to the newer version, which is a much more stable API. It’s worth the process of having to update your code IMO.

If you need to find out whats changed, you can check out the change log here.


#9

Do you mean you recommend I use the CLI to build a new project and port across to that or just to upgrade to V1 of ionic in my existing project and fix errors there?

Thanks for your help with this btw, it’s much appreciated.


#10

Thats up to you really, but i would recommend starting from the CLI. It’ll give you a good starting point and you’ll know its going to resolve your issue.


#11

I managed to upgrade to v1 and the header issue is resolved. Many thanks for that.

However, I’m still having problems with the $ionicLoading service on iOS. I am trying to use it to display form error messages. I want the message to stay on screen for a few seconds before disappearing.

Unfortunately on iOS it disappears almost immediately. I read there was a setTimeout issue with iOS 6 but the problem is occurring on an iOS7 device I’m using.

$scope.loading = $ionicLoading.show({content: 'informative error message'});

setTimeout(function () {
  $scope.loading.hide();
}, 3000);

#12

Hey sorry, I was out of town for a few days so I’ve been away from my computer. This sounds like it could be an issue. Do you mind throwing a codepen together? I can test it on a device and ask the devs about it


#13

No problem, apologies I’ve taken so long to get back to you.

I edited the playlistCtrl from the sidemenu starter project and uploaded the repo here:
https://github.com/techjacker/ionicloading

Try building and running this on the ios emulator and see if you get the same problem I do. It works fine in the browser though.


#14

I had this issue for a while, and tried everything.

What finally worked for me was to:

  • Remove cordova platform cordova platform rm ios
  • Delete the ios.json file from the plugins folder
  • Remove all plugins using cordova plugin rm org.apache.cordova.<<<plugin>>>
  • Reinstall all plugins using cordova plugin add org.apache.cordova.<<<plugin>>>
  • Add platform again cordova platform add ios
  • then build cordova build ios

See if that works for you. Sometimes you just need to repeat these steps to get it right.


#15

Ran it on the simulator and got this.

This is an issue, and you are not alone in this. There are others out there reporting the same thing so I’ll bring this to the devs attention.


#16

Actually it works a lot better on your simulator than it does on mine.

Okay thanks for following this up with the devs, I’ll keep an eye on future releases and will let you know if they resolve this issue.


#17

Thanks for the suggestion, I tried it a couple of times but still got the same problem unfortunately.


#18

I’m having exactly the same issue with @techjacker. The header bar is kinda stuck to the status bar like in the picture. Is there any chance that you solved this one? Used to work great for me but at some point it broke up and now it’s like on the screenshot.


#19

When I upgraded to ionic v1 beta then the problem went away.

I had to do a fresh install and port the code over from the existing project. It wasn’t as easy as just updating the bower dependency for me unfortunately.


#20

What plugins do you have installed? What version of ionic are you using?