Ion Content Hidden By Header Bar

ionic-v1
1

I’m using UI-Router’s multiple name views and came across a particular issue. Whenever I have two ui-views in the index.html, then the view’s are stacked on top of one another. Thus, the header bar hides the top portion of what’s inside the ion content tag. This does not happen if the ui-views are replaced with the actual html.

I attempted to create a codepen.io, but unfortunately the text/ng-template scripts I used can’t be recognized by UI-Router. In my actual code, they are inside a templates folder. The codepen url and github repo are below.

https://github.com/thejourneydude/chordpandora

2

Is there some place I can go to get this answered besides this forum? This is an issue I need fixed and appears to be a bug.

3

So the issue is how you have the nav-view structured.
Don’t use ui-view, rather user ionNavView.

http://ionicframework.com/docs/api/directive/ionNavView/

You should read up on the navigation docs as your project is not setup correctly

4

Thanks for the direction. I’ve fixed it now!

5

I fixed this by attaching has-header class to the <ion-content>, for example:

<ion-view view-title="忘记密码">
    <div class="bar bar-header bar-positive">
        <button class="button button-icon icon ion-chevron-left" ng-show="showBackButton()" ng-click="goBack()"></button>
	<h1 class="title">忘记密码</h1>
    </div>
    <ion-content class="has-header">
	<div class="list list-inset">
		<label class="item item-input">
			<input type="text" placeholder="请输入您的手机号">
		</label>
	</div>

	<div class="padding">
		<button class="button button-block button-energized button-meiyan" type="submit">完成</button>
	</div>
    </ion-content>
</ion-view>
6

Also, you can avoid has-header class by using the <ion-header-bar> tag:

<ion-view view-title="忘记密码">
    <ion-header-bar class="bar bar-header bar-positive">
        <button class="button button-icon icon ion-chevron-left" ng-show="showBackButton()" ng-click="goBack()"></button>
    <h1 class="title">忘记密码</h1>
    </ion-header-bar>
    <ion-content>
    <div class="list list-inset">
	<label class="item item-input">
		<input type="text" placeholder="请输入您的手机号">
	</label>
    </div>

    <div class="padding">
	<button class="button button-block button-energized button-meiyan" type="submit">完成</button>
    </div>
    </ion-content>
</ion-view>