Footer bar getting cut off in emulator

@baande03 wrote:

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

cutoff.png392x821 75.3 KB

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.

Posts: 2

Participants: 1

Read full topic