jquery mobile persistent navbar footer partly hidden

Question

using jquery mobile 1.3.1. Created a persistent navbar inside footer, works ok but navbar is only partly shown. about half of the height is hidden.

here's the code, this is after the closing div of 'content'

<div data-role="footer" dat-id="foo1" data-position="fixed" >
    <div data-role="navbar" >
          <ul>
             <li><a href="#" data-icon="grid">page1</a></li>                                                
             <li><a href="#" data-icon="star">Page2</a></li>
        </ul>
    </div>
</div>

What did i do wrong?

Answer 1

I think some of your custom css is messing with navbar css. Unless you can show use your whole page and maybe css there's nothing we can do.

In case you think your css is not a cause of this problem you can always fix your navbar position with this css:

.ui-navbar {
    margin-bottom: 30px !important;
}

Use any size in px that will help you to elevate navbar to correct height.