Hi there, I have a somewhat non-trivial header that I am hoping to “shrink” as the user scrolls.demo shrinking header but that doesn’t work in my case (when I scroll around, icons get overlaid, show-delete icons get overlaid and all sorts of other things - UI mess)
The reason I say the page is non-trivial is because:
My code for the header is here:
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" ng-click="openMenu()">
</button>
<button class="button button-icon icon ion-ios-minus-outline" ng-click="eventList.showDelete = !eventList.showDelete;"></button>
<button data-badge="{{$root.alarmCount}}" class="animated infinite tada button button-icon button-clear ion-ios-bell notification-badge"
ng-click="handleAlarms();" ng-if="$root.isAlarm"></button>
</ion-nav-buttons>
<ion-nav-buttons side="right">
<a style="" class="button button-icon icon ion-android-more-vertical" ng-click="popover.show($event)" ;> </a>
<a class="button button-icon icon ion-search" ng-href="" ng-click="searchClicked();"> </a>
</ion-nav-buttons>
<div ng-if="showSearch">
<ion-header-bar class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-ios7-search placeholder-icon"></i>
<input type="search" placeholder="{{'kSearch'|translate}}" ng-model="search.text" autocorrect="off" autocomplete="off">
</label>
</ion-header-bar>
</div>
<!-- collection repeat forces js scrolling, thing to remember -->
show original
Any thoughts on how I can do a shrink effect?
Okay, I’ve made some progress with a modified version of header shrink I found on a forum (lost the link for credit)
This is resulting in a space between the scrolling list and the header
Video here: https://youtu.be/kR9aN3la1wE
Any ideas?
Ah problem solved. Forgot to add
ion-content {
top: 0 !important;
}
(note that the div padding needs to 64px for iOS not 50px)
1 Like