Home/ Questions/Q 6925847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T10:50:32+00:00

I am adding navbar in my header, trying to have it look like the

  • 0

I am adding navbar in my header, trying to have it look like the tab system found here:
http://jquerymobile.com/demos/1.0/docs/toolbars/docs-navbar.html

however when I add this code below to my app, the header navbar has padding and weird spaces all around the tab button.

<div data-role="header">        
    <div data-role="navbar">
        <ul>
            <li><a href="#">One</a></li>
            <li><a href="#">Two</a></li>
            <li><a href="#">Three</a></li>
        </ul>
    </div><!-- /navbar -->
</div><!-- /footer -->

I tried setting margin to 0, but that didn’t remove the empty space around the tabs,
can someone help?

Thanks

Screen shot of the weird spacing around the tabs

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Thanks to everyone who replied but I figured out my problem.

    I’m using a mobile framework called appMobi to make mobile apps in javascript/css/html,
    and when using a js UI framework like jquery mobile, I had some tab issues (and cutting off of the bottom footer which I still don’t know why…).

    The issue was that I was importing the jquery.mobile.min.js twice, once in the header, and once right below the body tag. I know, it sounds weird, but in my defense, an appMobi video told me to do it…probably out of date video…

    So, fix is to only import the jquery js files once at the top in the header.

    Cheers,

    • 0