Overlap when hiding ion-toolbar

Ionic Framework ionic-v3
1

I am using Beta 11. I am trying to hide my Searchbar if my list has no items in it to search. I am using tab layout and I have the following template:

<ion-header>
	<ion-navbar primary>
		<button menuToggle>
			<ion-icon name='menu'></ion-icon>
		</button>
		<ion-title>
			To-Do List
		</ion-title>
	</ion-navbar>
	<ion-toolbar *ngIf="viewCount>0" no-border-top>
	<ion-searchbar name="search" (input)="onSearchInput($event)" [debounce]="500"></ion-searchbar>
	</ion-toolbar>
</ion-header>
<ion-content>
List of Items<br/>
Test Item 1<br/>
Test Item 2<br/>
Test Item 3

If I remove the *ngIf on the ion-toolbar, everything looks correct with the ion-content being directly below the ion-header. When viewCount=0, the searchbar disappears and the list is shown right below the navbar as expected. When viewCount>0, the header is shown as expected with the searchbar, but it overlaps the ion-content so that the list is mostly hidden behind the searchbar as shown below. I also tried to use [class.hide]=“viewCount===0” and it has the same result.

image

Does anyone know how I can conditionally hide the toolbar/searchbar without causing the overlap problem?

1 Like
2

Please have a look at this (closed) issue.

1 Like
3

Thank you, that worked.