CODEWITHSUNDEEP
htmlcssgoogle-chromeionic-frameworkionic3
LeonardoGuimaraes
LeonardoGuimaraes

Reputation: 275

Ionic - Fixed div scrolling inside ion-content

After GoogleChrome update, a fixed div is scrolling with the page.

Sample: LINK

In this case, the MAP is a fixed div inside ion-content.

If I put a simple div like bellow inside ion-content, it does not stay fixed, but if I move outside the ion-content it gets fixed!

<div style="width: 100px;height: 100px;position: fixed; left: 0; bottom: 0px; z-index: 500; background-color: blue;"></div>

How to make it FIXED inside ion-content?

Thanks for help me!

I am using Ionic 3(3.20.0)

Upvotes: 0

Views: 2358

Answers (1)

Jonathan
Jonathan

Reputation: 11

You should work with ion-toolbar in your Header or Footer. Something like this (I tried it in stackbliz): 

<ion-header>
  <ion-toolbar>
    <ion-title>My Toolbar Title</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to Ionic!</h2>
  <p>
    This starter project comes with simple tabs-based layout for apps
    that are going to primarily use a Tabbed UI.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>

  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>
  <p>
    Take a look at the <code>pages/</code> directory to add or change tabs,
    update any existing page or create new pages.
  </p>

</ion-content>

<ion-footer no-border>

  <ion-toolbar>
    <ion-title>I'm a footer</ion-title>
  </ion-toolbar>

</ion-footer>

Upvotes: 1

Related Questions