I have following code in popover template:
<ion-popover-view class="customPopup">
<ion-header-bar class="bar bar-header barHeaderCustom">
<h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1>
</ion-header-bar>
<ion-tabs class="tabs-icon-only tabs-top tabs-positive">
<ion-tab title="{{ 'SOUNDS' | translate }}">
<ion-content class="has-header">
<!-- SEARCH INPUT-->
<label class="item item-input">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="{{ 'SEARCH' | translate }}" ng-model="searchedStringSingleSounds">
</label>
<!-- //SEARCH INPUT-->
<div ng-click="addSoundToSelection({{$index}},'singles')" class="item item-button-right" ng-repeat="sound in availableSounds| filter:searchedStringSingleSounds">
{{sound.name}}
<button class="button button-positive" >
<i class="icon ion-plus-circled"></i>
</button>
</div>
</div>
</ion-content>
</ion-tab>
Which is producing following popover window:
Problem is that input is scrolling with listView content, but should be static. How can i do it please?
I tried to found solution in documentation, but without luck.
Many thanks for any advice.
Move your input outside your ion-content and place it in a subheader
<ion-header-bar class="bar bar-header barHeaderCustom">
<h1 class="title">{{ 'AVAILABLE_SOUNDS' | translate }}</h1>
</ion-header-bar>
<div class="bar bar-subheader item-input-inset">
<label class="item-input-wrapper">
<i class="icon ion-search placeholder-icon"></i>
<input type="text" placeholder="{{ 'SEARCH' | translate }}" ng-model="searchedStringSingleSounds">
</label>
</div>
then add has-header has-subheader
classes to your ion-content element
<ion-content class="has-header has-subheader">