Add fixed ion-row in top of the ion-content ionic 2

3
votes

In ionic we can add ion-navbar and ion-toolbar in ion-header but I want to ad some customized menu bar to my application in top of the ion-content for that I add ion row and add z-index and position CSS for that it works in browser but when it build that menu-bar change position it is not fixed in top. I guess that after I fixed the position user cannot scroll the ion-content when scrolling the position of the menu is changes. How can I add customize menu bar to the top of ion-content

this image shows the menu bar in gray color enter image description here

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row style="position: fixed;height: 50px;background: #444444">
        <button ion-button small>test btn</button>
    </ion-row>
    <ion-row *ngFor="let item of data" style="background: #eee;border: 1px solid #888;height: 40px">
      {{item.name}} - {{item.id}}
    </ion-row>
  </ion-grid>
</ion-content>
2
cssionic2
can you put your code or a picture about what you want? - amin arghavani
I put an image to the question - Dileepa Chandima
did you try putting the button row in the header after navbar? - Suraj Rao

2 Answers

3
votes

you can add a ion-toolbar inside the ion-content tag just like you would in the header and it will work the same, you just need to add a position:fixed to the toolbar

<ion-toolbar style="position:fixed;">
 <ion-buttons start>
   <button ion-button icon-only color="royal">
     <ion-icon name="search"></ion-icon>
   </button>
 </ion-buttons>
 <ion-title>Send To...</ion-title>
 <ion-buttons end>
   <button ion-button icon-only color="royal">
     <ion-icon name="person-add"></ion-icon>
   </button>
 </ion-buttons>
</ion-toolbar>
2
votes

I think you need this:

<ion-header>
<ion-navbar>
    <ion-title>title</ion-title>
</ion-navbar>
<ion-grid style="position: fixed; height: 50px; background: #444444">
    <ion-row>
        <ion-col>
        </ion-col>
    </ion-row>
</ion-grid>
</ion-header>

<ion-content style="top: 50px;">
</ion-content>