CODEWITHSUNDEEP
ionic-framework
Dean Hantzis
Dean Hantzis

Reputation: 81

How to add a ionic v3 component in ion-content but put the component's child button in ion-footer

I’ve created a few components that handle form submission functionality. In each of these components, I want the form submit/cancel buttons to be fixed at the bottom of the view, much like the functionality available via ion-footer. The submit button needs reference to the variables + methods in the component for [disabled] + (tap) functionality, for example [disabled]="!formGroup.valid" (tap)="submitForm()"

If the component is a child of ion-content then there is no way to add ion-footer as it will be contained within ion-content, instead of below ion-content. At first glance, having ion-footer inside ion-content appears to view properly, but the rendering can be buggy especially in scroll situations. I went as far as setting a force-bottom css class with fixed position/bottom but it looks like the ionic javascript overrides fixed positioning when inside ion-content, so a pure CSS solution does not seem to be possible.

<ion-content> 
    <a-form-component>
    </a-form-component>
</ion-content>
<ion-footer>
  <!-- add a-form-component's button here -->
</ion-footer>

Any recommendations on how to achieve the desired functionality?

TIA

Upvotes: 1

Views: 695

Answers (1)

George
George

Reputation: 734

Let's say you have a page called page and a component called cp inside page.html you have the component <cp></cp>

Inside cp.html you have 

<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div>anything goes here</div>
<div id="the-footer">
    <button>login<button>
</div>

inside page.scss:

  #the-footer{

         background-color: #efefef;
         text-align: center;
         position: fixed;
         width: 100%;
         bottom: 0px;
         z-index: 99999;
  }

This will achieve the same result as ion-footer.

The div containing the button will always be visible regardless of the scrolling.

hope it helps

Upvotes: 0

Related Questions