Hi there,
I am using Ionic 3 for a project and I just got stuck at something which I really don’t understand, so my use case is,
I am making a page in which I want to set some content fixed on top using z-index and below that fixed content some content will be scrollable(Just like a fixed nav bar that we uses on pages). So I have this code till now,
<ion-header>
<ion-navbar color="myNav">
<ion-buttons left>
<button ion-button icon-only clear (click)="close()">
<ion-icon name="close"></ion-icon>
</button>
</ion-buttons>
<ion-title text-center>
<div class="title-class">Select Scope</div>
</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<div class="fixed-position">
<div class="searchBack">
<ion-searchbar [(ngModel)]="search" (ionInput)="searching($event)"
placeholder="Search brand, cluster or outlet."></ion-searchbar>
</div>
<div class="searchBack allBrandsText">
Selected :
<span *ngIf="selectedOutlet" class="outlet-title">{{selectedOutlet.name}} - {{typeOfSelection}}</span>
<span *ngIf="!selectedOutlet" class="outlet-title">All Outlets</span>
</div>
<!-- It should not be visible when user is searching something -->
<ion-grid *ngIf="!isSearching" class="all-outlet-btn">
<ion-row>
<ion-col ion-button clear text-center col-12 class="all-outlet-style" (click)="selectOutlet(null)">All Brands and Outlets
</ion-col>
</ion-row>
</ion-grid>
<ion-grid *ngIf="!isSearching" class="option-tabs">
<!-- <ion-row>
<ion-col ion-button clear text-center col-12 class="all-outlet-style" (click)="selectOutlet(null)">All Brands and Outlets
</ion-col>
</ion-row> -->
<ion-row>
<ion-col ion-button clear text-center col-4 class="border-right" (click)="selectedTab('brand'); i=1" [ngClass]="{ 'active-option': i==1, 'button-color': i!=1 }">Brands
</ion-col>
<ion-col ion-button clear text-center col-4 class="border-right" (click)="selectedTab('cluster'); i=2" [ngClass]="{ 'active-option': i==2, 'button-color': i!=2 }">Clusters
</ion-col>
<ion-col ion-button clear text-center col-4 class="button-color" (click)="selectedTab('deployment'); i=3" [ngClass]="{ 'active-option': i==3, 'button-color': i!=3 }">Outlets
</ion-col>
</ion-row>
</ion-grid>
</div>
<div *ngIf="!isSearching" class="absolute-position">
<ion-list *ngIf="isBrand">
<ion-item *ngFor="let item of items" class="cluster item-bottom lable-md" (click)="selectOutlet(item,'brand')">
<div class="outlet-name">{{item.name}}</div>
<ion-icon class="arrow-icon" item-right name="arrow-forward" small></ion-icon>
</ion-item>
</ion-list>
<ion-list *ngIf="isCluster">
<ion-item *ngFor="let item of listOfClusters" class="cluster item-bottom lable-md" (click)="selectOutlet(item,'cluster')">
<div class="outlet-name">{{item.name}}</div>
<ion-icon class="arrow-icon" item-right name="arrow-forward" small></ion-icon>
</ion-item>
</ion-list>
<ion-list *ngIf="isDeployment">
<ion-item *ngFor="let item of listOfDeployments" class="cluster item-bottom lable-md" (click)="selectOutlet(item,'deployment')">
<div class="outlet-name">{{item.name}}</div>
<ion-icon class="arrow-icon" item-right name="arrow-forward" small></ion-icon>
</ion-item>
</ion-list>
</div>
<div *ngIf="isSearching">
<ion-list>
<ion-item *ngFor="let item of searchDeployments" class="cluster item-bottom lable-md" (click)="selectOutlet(item.data, item.type)">
<div class="outlet-name">{{item.data.name}} - {{item.type | titlecase}}</div>
<ion-icon class="arrow-icon" item-right name="arrow-forward" small></ion-icon>
</ion-item>
</ion-list>
</div>
<div *ngIf="something" class="search-absolute-position">
<div *ngIf="isEnterprise">
<ion-grid (click)="selectOutlet(null)">
<ion-row>
<ion-col col-1 class="greendotcol">
<div class="greendot"></div>
</ion-col>
<ion-col col-10 class="greenDotText"> All Brands and outlets</ion-col>
</ion-row>
</ion-grid>
<div class="searchBack allBrandsText">
<ion-icon name="md-restaurant"></ion-icon> All Brands
</div>
<ion-grid>
<ion-row class="brandRow" *ngFor="let row of grid" text-center>
<ion-col *ngFor="let item of row" (click)="selectOutlet(item,'brand')" style="border-right: 1px solid #fefefe ; border-bottom:1px solid #fefefe">
<!-- <img src="assets/img/dominos.png" height="50"> -->
<div *ngIf="item">{{item.name}}</div>
</ion-col>
</ion-row>
</ion-grid>
<ion-grid class="searchBack listgrid">
<ion-row class="listRowSelector">
<ion-col col-4 class="listSelectorcol1" text-center> All Clusters</ion-col>
<ion-col col-4 text-center>
<ion-toggle checked="{{filter}}" [(ngModel)]="filter"></ion-toggle>
</ion-col>
<ion-col col-4 class="listSelectorcol2" text-center>
All Outlets
</ion-col>
</ion-row>
</ion-grid>
</div>
<ion-grid (click)="selectOutlet(null)" *ngIf="!isEnterprise">
<ion-row style="border-bottom: 1px solid #dadada;
margin-left: -25px;">
<ion-col col-1 class="greendotcol">
<div class="greendot"></div>
</ion-col>
<ion-col col-10 class="greenDotText"> All Brands and outlets</ion-col>
</ion-row>
</ion-grid>
<ion-list *ngIf="!filter">
<ion-item *ngFor="let item of listOfClusters" class="cluster item-bottom lable-md" (click)="selectOutlet(item,'cluster')">
{{item.name}}
</ion-item>
</ion-list>
<ion-list *ngIf="filter">
<ion-item *ngFor="let item of listOfDeployments" class="cluster item-bottom lable-md" (click)="selectOutlet(item,'deployment')">
{{item.name}}
</ion-item>
</ion-list>
</div>
</ion-content>
Its CSS:
page-outlet-selector {
.searchBack {
background-color: #eeeeee;
}
.greendotcol {
padding-top: 10px;
padding-left: 25px;
}
.greendot {
background-color: #05929b;
width: 8px;
height: 8px;
border-radius: 50%;
}
.greenDotText {
color: #05929b;
padding-left: 10px;
}
.allBrandsText {
padding: 8px 0px 8px 8px;
border: solid #eeeeee;
}
.brandRow {
height: 57px;
border-bottom: 1px solid #fefefe;
}
.listSelectorcol1 {
padding-top: 14px;
margin-left: 20px;
}
.listSelectorcol2 {
padding-top: 14px;
margin-left: -38px;
}
.listgrid {
height: 38px;
}
.listRowSelector {
margin-top: -10px;
}
.cluster {
color: #a8a8a8;
font-size: 10px;
}
.item-md {
padding-left: 4px
}
.item-inner {
border-bottom: 0px solid #fafafa !important;
}
.lable-md {
padding-left: 19px !important;
}
.item-bottom {
border: 1px solid #fafafa !important;
}
.border-right {
border-right: 1px solid gray !important;
}
.title-class {
font-size: 15px;
color: white;
font-weight: 400;
}
.outlet-title {
font-weight: 600;
color: black;
}
.outlet-name {
font-size: 14px;
font-weight: 400;
color: gray;
float: left;
}
.arrow-icon {
color: #c7c5c5;
}
.fixed-position {
margin-top: 13%;
width: 100%;
max-width: 100%;
position: fixed;
z-index: 1;
background-color: #eeeeee;
}
.absolute-position {
width: 100%;
max-width: 100%;
position: absolute !important;
margin-top: 42% !important;
z-index: 0;
}
.search-absolute-position {
width: 100%;
max-width: 100%;
position: absolute !important;
margin-top: 23% !important;
z-index: 0;
}
.option-tabs {
background-color: white;
margin: 8px 0 0 0 !important;
padding: 0;
}
.all-outlet-btn {
background-color: white;
padding: 0 0 0 0 !important;
}
.button-color {
background-color: white;
color: gray;
border: none;
}
.active-option {
color: white;
background-color: #2174a0;
}
.all-outlet-style {
border-bottom: 0.5px solid gray !important;
}
}
My problem :
When the page loads, the container of ion-content doesn’t starts after the ion-header , instead it starts from top of page just like the ion-header due to which I need to give some margin top, so that the fixed view of page will be accurate. But, when I click on the ‘Search Bar’ in that page(which is in the fixed view), the ion-content changes its css or container itself and just starts just after the ion-header.
Well, generally the thing which happens is ion-content starts after the ion-header, but this isn’t happening on loading this time. Now, I don’t know why this happening.
Please help 
