CODEWITHSUNDEEP
javascriptcssionic-frameworkionic2
Vahid
Vahid

Reputation: 1939

Ionic 2 fixed positioned div inside ion-content

I have a component which lists a bunch of records and has a footer positioned fixed at the bottom. 

list-component footer {
     position: fixed;
     bottom: 10px;
}

This component is used in several pages so when it gets rendered, the footer ends up inside an ion-content element.

<my-page>
    <ion-content>
        <div class="scroll-content">
            <list-component>
                 <!-- component contents -->
                 <footer>
                    <!-- footer contents -->
                 </footer>
            </list-component>
        </div>
    </ion-content>
</my-page>

the footer behaves as expected (fixed at the bottom) when shown on browser and also on an android device but when displayed on an iOS device the footer behaves in a strange way (it scrolls with the contents of the ion-content and then gets back to its fixed position).

I know the footer will act normally if moved out of the ion-content but as I explained this is inside a component that is being used in several pages and the ion-content comes with the page and not the component.

Is there a way to make this work without moving the footer out of the ion-content?

Upvotes: 1

Views: 2572

Answers (1)

Vahid
Vahid

Reputation: 1939

It appears that there's no straightforward solution to this issue.

So I settled with a middle ground solution which I'm going to explain for other people's reference.

I did not like the idea of duplicating footer code in every page so I broke the component into two, one for the list and one for the footer.

I also added a view-model class to glue the two components.

The final solution looks like this:

<my-page>
  <ion-content>
        <list-component [(footer)]="footer">
        </list-component>
  </ion-content>
  <footer-component [footer]="footer"></footer-component>
</my-page>

So the footer component rests outside the ion-content hence the fixed positioning won't break on iOS.

Also note that the view-model is bound two-way to the list-component and one-way to the footer-component so that when footer data changes inside the list component, the footer component updates itself.

Upvotes: 1

Related Questions