Ion-content is breaking the css on using z-index on that page


#1

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 :slight_smile: