Scrollable + non-scrollable content in a view?

ionic-v1
1

CodePen here: http://codepen.io/RangerRick/full/MYJrOo

In my real app I’m using an ion-nav-bar, but in the codepen I just put a title header in there to take up the space.

I’m trying to create a list with a search bar that always sticks to the top. I’ve tried putting the header outside of the <ion-content> but then I end up with horrible layout issues because ionic doesn’t really expect things between the real header and the <ion-content>. If I make the <ion-content> have scroll=“false” and then add an <ion-scroll> inside it past the bar like in the CodePen, everything lays out right but the contents of the <ion-scroll> won’t scroll, even if I trigger a resize.

Any ideas?

2

hi,

if i understand you correctly check this:

1 Like
3

Yup, just make a second ion-header-bar and give it a class of sub-header.

4

Aha! That gets me closer. In my case, the first header is actually part of nav, so I have an ion-nav-bar and then an ion-header-bar.

When I try changing your first ion-header-bar to an ion-nav-bar in your codepen, it works, but in my code, the ion-content is not getting “has-subheader” automatically so the content is pushed up. It’s also further complicated in that my second header bar is created with a directive, so maybe there’s something funny going on there that keeps ionic from knowing there’s a subheader?

Anyways, if I add “has-subheader” manually it works, however, so that at least gives me a workaround. I’ll see if I can come up with a codepen that doesn’t include pulling in Everything My Entire Project Does that reproduces the newer issue.

5

Is the sub-header class being applied to a ion-header-bar?

1 Like
6

Yeah, the template is:

<ion-header-bar class="bar-subheader item-input-inset" name="cm-search-bar">
	<label class="item-input-wrapper">
		<i class="icon ion-ios7-search placeholder-icon"></i>
		<input type="search" placeholder="{{placeholder}}" ng-model="searchStringInternal" ng-change="updateSearchString()" />
	</label>
	<button class="button button-clear" ng-if="searchStringInternal" ng-click="clearSearchString()">
		<i class="icon ion-close-circled"></i>
	</button>
</ion-header-bar>
7

weird, it’s working in the codepen and a real app.

Are you getting any js-errors?

Can you post a codepen?

8

I had other strange issues with ion-nav-bar anyways, so I gave up and reworked things to be individual ion-header-bars per-view and adding bar-subheader myself and everything seems to be working fine.

I’m honestly not sure how much of what I was doing can be distilled down to a codepen without way more work than I want to go into. I’m in a time crunch to get this app done before the cruise the 31st. :wink: