Footer bar hiding list/content

1

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

Index.html

<body ng-app="mobireward" ng-controller="MainCtrl">	
    <!-- View -->
    
    <ion-nav-view animation="slide-left-right"></ion-nav-view>    
    
    <!-- Footer -->
    <div class="bar bar-footer">
        <button class="button button-icon icon ion-ios7-search" ng-click="go('/home')">
            Search
        </button>        
        <button class="button button-icon icon ion-ios7-briefcase-outline" ng-click="go('/my-coupons')">
            My Coupons
        </button>
        <button class="button button-icon icon ion-ios7-location-outline" ng-click="go('/location')">
           Location
        </button>
        <button class="button button-icon icon ion-ios7-browsers-outline" ng-click="scan()">
           Scan
        </button>
    </div>
</body>

Detail page

<ion-view>
    <ion-header-bar class="bar-positive nav-title-slide-ios7">
        <a class="button icon-left ion-chevron-left button-clear bar-positive" ng-click="back()"></a>
        <h1 class="title">Coupon Details</h1>
    </ion-header-bar>

    <ion-content overflow-scroll="true" scrollbar-y="true">
        <ion-scrol>
            <div class="list card" style="margin-bottom:120px">
                <div class="item item-body item-text-wrap">
                    <h3>{{coupon.CouponName}}</h3>
                    <p>{{coupon.DateEnd | date: "dd-MMM-yy"}}</p>
                </div>

                <div class="item item-body item-text-wrap">
                    <img class="full-image" src="data:image/png;base64,{{coupon.CouponImage}}">
                    <p>
                        {{coupon.CouponDescription}}
                    </p>
                </div>
                <div class="item item-text-wrap">
                    <button class="button button-calm button-block" ng-click="grabCoupon()" ng-show="!grabbed">
                        Grab this Coupon
                    </button>
                    <p ng-show="grabbed">
                        <button class="button button-outline button-balanced">
                          This coupon is already Grabbed
                        </button>
                    </p>
                </div>
            </div>    
        </ion-scroll>    
    </ion-content>
</ion-view>

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.

2

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

1 Like
3

I was trying to to scroll in case hiding. Now I changed the code but still getting same issue:

Coupon Details

<ion-content >
    <ion-scroll>
        <div class="list card" style="margin-bottom:120px !important">
            <div class="item item-body item-text-wrap">
                <h3>{{coupon.CouponName}}</h3>
                <p>{{coupon.DateEnd | date: "dd-MMM-yy"}}</p>
            </div>

            <div class="item item-body item-text-wrap">
                <img class="full-image" src="data:image/png;base64,{{coupon.CouponImage}}">
                <p>
                    {{coupon.CouponDescription}}
                </p>
            </div>
            <div class="item item-text-wrap">
                <button class="button button-calm button-block" ng-click="grabCoupon()" ng-show="!grabbed">
                    Grab this Coupon
                </button>
                <p ng-show="grabbed">
                    <button class="button button-outline button-balanced">
                      This coupon is already Grabbed
                    </button>
                </p>
            </div>
        </div>    
    </ion-scroll>    
</ion-content>

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

4

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.

5

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?

6

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

1 Like
7

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

<ion-footer-bar class="bar-transparent has-tabs has-footer" ng-if="!isSignedIn()">
    <div class="item item-body">
        <span class="center size-12">abcdefghijklmnopqrstuvwxyz</span>
        <button class="button button-block button-energized" ng-click="click()">
            Click Me
        </button>
    </div>
</ion-footer-bar>

What other modifications should I do so that this new height of footer bar won’t hide the content? :persevere:

8

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/

It will recalculate hopefully the correct height^^

9

I will try your suggestion. Thanks!