Footer above tabs in tab view

ionic-v1
1

Hey there guys :smile:

Anyone know how to add a “footer” in a tab view?

What I mean by this is having a component that floats directly above the tabs in a tab view and will persistently stay at the very bottom of the view, but right above the tabs? Obviously this will only be applicable to iOS, on Android since the tabs are at the top of the view the “footer” should remain at the very bottom of the content area.

Using the regular footer class doesn’t seem to work.

Thanks :smile:

2

Is this what you had in mind:

The idea is to put <ion-footer-bar> element into every tab page. In this codepen example this means at the bottom of home, about and contact pages, right after <ion-content>.

3

Thank you @bokboki2002 that is close to what I want.

I have a container with buttons inside, which need to be anchored to the bottom of the view (so the bottom of the button container will touch the top of the tabs).

Using the footer doesn’t allow me to add the buttons or to make the section grow vertically so unfortunately it doesn’t work.

Any other idea how to make something like that work? Here’s a look at the HTML:

<ion-content class="padding">    	

<div style="background-color: #ffffff;opacity: 0.8; text-align:center; margin:50px auto;">
	<div class="row">   
		<a class="col caption">
			<img src="http://kidsapp01.businesscatalyst.com/images/chores.png">
			<div class="caption">Chores</div>	
		</a>
		<a class="col caption">
			<img src="http://kidsapp01.businesscatalyst.com/images/savings.png">
			<div class="caption">Account</div>	
		</a>
		<a class="col caption">
			<img src="http://kidsapp01.businesscatalyst.com/images/budget.png">
			<div class="caption">Budget</div>	
		</a>
		<a class="col caption">
			<img src="http://kidsapp01.businesscatalyst.com/images/airtime.png">    	
			<div class="caption">Airtime</div>	
		</a>     		
	</div>   
	<div class="row" style="margin-top:10px;">    
		<a class="col-25 caption">
			<img src="http://kidsapp01.businesscatalyst.com/images/videos.png">
			<div class="caption">Videos</div>	
		</a>    
		<a class="col-25 caption">
			<img src="http://kidsapp01.businesscatalyst.com/images/goals.png">    	    	
			<div class="caption">Goals</div>	
		</a>    

	</div>    
</div>	    
</ion-content>

Thanks :slight_smile:

4

Here is one way to do it:

But the limitation is that the footer height is fixed in CSS (customFooter class), and ion-content also has custom class to be aligned with the footer.

If you need your footer to have dynamic height (depending on the height of the buttons), than a directive is needed to dynamically change the ion-content offset from the bottom (bottom property in CSS).
Here is that example:

1 Like
5

Thank you for all the help :smile:

6

image
image322×642 3.1 KB

Here i’m adding a footer on top of ion-tabs, problem is I’m having multiple pages with individual header and content.

I need to handle this in ion-tabs so that it is a one time activity to call API and show card to user.

footer card is adding on top of ion-tabs, but it is over-riding the ion-content in every page and end of the scroll bar is getting disappeared every where.

Please help me to handle this @ bokboki2002