# Footer bar hiding list/content **URL:** \ **Category:** uncategorized\ **Created:** [June 10, 2014, 7:20am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435 "2014-06-10T07:20:50Z")\ **Posts on this page:** 9\ **Page:** 1

**Author:** ![pahamad](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@pahamad](https://forum.ionicframework.com/u/pahamad)\ **Post date:** [June 10, 2014, 7:20am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/1 "2014-06-10T07:20:51Z")

Footer bar hiding few list/card item at bottom till the footer bar height. I tried many but didn’t worked: **Index.html** ```

``` **Detail page** ```

Coupon Details

``` Half of the last div item is hiding. Please anyone suggest me, am I missing anything as per ionic? I tried to put scroll but still it’s not working. ---

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\ **Post date:** [June 10, 2014, 7:28am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/2 "2014-06-10T07:28:20Z")

hey, “ion-scrol” should be “ion-scroll” ;). You do not need a scoll container in your ion-content. Why do you use overflow scrolling instead of ionic scolling? greets, bengtler ---

**Author:** ![pahamad](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@pahamad](https://forum.ionicframework.com/u/pahamad)\ **Post date:** [June 10, 2014, 7:43am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/3 "2014-06-10T07:43:06Z")

![](https://sea1.discourse-cdn.com/ionicframework/uploads/default/934/f78e0533e0f23e58.png) I was trying to to scroll in case hiding. Now I changed the code but still getting same issue: # Coupon Details ```

``` It’s like detail page no list. Attached image how it’s displaying. ---

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\ **Post date:** [June 10, 2014, 8:02am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/4 "2014-06-10T08:02:17Z")

You are destroying the ionic dom structur… You add the ion-footerbar in your base layout (outside of your ion-view and ion-content). The scroll container of the ion-content searchs for a ion-footer in your ion-view. You can add manually the has-footer class to your ion-content. ---

**Author:** ![pahamad](https://avatars.discourse-cdn.com/v4/letter/p/a8b319/32.png) [@pahamad](https://forum.ionicframework.com/u/pahamad)\ **Post date:** [June 10, 2014, 8:49am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/5 "2014-06-10T08:49:29Z")

Thanks @bengtler When I put footer after ion-content then its working fine. How can I make it common for all view like put into the index file? ---

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\ **Post date:** [June 10, 2014, 9:00am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/6 "2014-06-10T09:00:45Z")

Solution 1: Create a base abstract state in your routing. this state holds the baselayout for all other states with own ion content footer and header. Solution 2: Add class=“has-footer” to your ion-content and leave your footer where it was ---

**Author:** ![user123](https://avatars.discourse-cdn.com/v4/letter/u/ed655f/32.png) [@user123](https://forum.ionicframework.com/u/user123)\ **Post date:** [April 15, 2015, 8:03am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/7 "2015-04-15T08:03:29Z")

Hi! I modified the height and bottom for subfooter for some reasons. ``` .bar.has-footer.has-tabs { height: 150px !important; } .has-footer.has-tabs { bottom: 60px !important; } .has-tabs, .bar-footer.has-tabs { bottom: 49px; } ``` and added ion-footer bar after ion-content ``` ``` What other modifications should I do so that this new height of footer bar won’t hide the content? 😣 ---

**Author:** ![bengtler](https://sea1.discourse-cdn.com/ionicframework/user_avatar/forum.ionicframework.com/bengtler/32/98565_2.png) [@bengtler](https://forum.ionicframework.com/u/bengtler)\ **Post date:** [April 15, 2015, 10:48am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/8 "2015-04-15T10:48:16Z")

problem is that you have a ng-if on your ion-footer -\> so the ion content calculates the wrong height. remove has-footer class and try to call $ionicScrollDelegate.resize() if isSignedIn() changes. [http://ionicframework.com/docs/api/service/$ionicScrollDelegate/](http://ionicframework.com/docs/api/service/%24ionicScrollDelegate/) It will recalculate _hopefully_ the correct height^^ ---

**Author:** ![user123](https://avatars.discourse-cdn.com/v4/letter/u/ed655f/32.png) [@user123](https://forum.ionicframework.com/u/user123)\ **Post date:** [April 15, 2015, 11:59am UTC](https://forum.ionicframework.com/t/footer-bar-hiding-list-content/5435/9 "2015-04-15T11:59:10Z")

I will try your suggestion. Thanks!

Coupon Details

{{coupon.CouponName}}

{{coupon.CouponName}}