Footer bar getting cut off in emulator

I have seen a few other posts about people having this same problem, but none of the solutions offered have fixed my issue.


As you can see, the footer bar at the bottom is cut off. I need to be able to have a different foot bar on every view/template, and it keeps showing up like the pic above on all panels.

If i add it to the index.html under the tags, it works fine. But when I add it to the bottom of a panel like the code below, then I get the cut off.

<a href="#/auto-panels" style="text-decoration: none;"><button class="button button-block button-assertive" ng-click="saveCustInfo()">
                Continue
                </button></a>
              </form>
           </div><br/><br/>
         </ion-content>
    <div class="bar bar-footer bar-dark">
        <div class="button-bar">
          <a class="button" href="#/main">Home</a>
          <a class="button" ng-click="localStorage.clear()">Clear</a>
          <a class="button" href="#/estimate">Estimate</a>
        </div>
    </div>
</ion-view>

I have tried editing css a little like .

.has-footer {
bottom: 44px; } (i tried 64px)

…and…

.bar-footer {
bottom: 0; (tried 20px)

…but niether of these changes worked.

I havent tried it yet, but most people making the app ‘fullscreen’ in config.xml to get around this, but I would prefer not to have to do that. Any ideas would be appreciated.

I found a ‘hack’ solution, but I not fond of it. It also only seems to work on IOS8 and not Android.

If i wrap the footer with div/style/position and bottom 20px, then it works. Still interested in other solutions.

<div style="position: absolute; bottom: 20px; width: 100%;">
         <div class="bar bar-footer bar-dark">
        <div class="button-bar">
  <a class="button" href="#/main">Home</a>
  <a class="button" ng-click="localStorage.clear()">Clear</a>
  <a class="button" href="#/estimate">Estimate</a>
</div>
     </div>
    </div>
<a href="#/auto-panels" ...

Sorry, not an answer to your immediate problem but don’t use “href”.

The Ionic framework uses the angular-ui-router module for handling routes and defining states (including nested states and nested views) so you need to use ‘ui-sref’ or ‘$state.go()’ and not “href”.

See: