CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-mobile
simonshout
simonshout

Reputation: 95

JQuery Mobile tabs are not aligned

I'm currently building a cordova app and on my android phone screen the tabs look like this:

Tabs The above picture was run in JSFiddle with JQuery 2.1.0 and the JQM 1.4.2 option checked off with the code:

<div data-role="tabs" id="tabs">
  <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>
</div>

Here is the link by request: https://jsfiddle.net/simonshout/18sssw7m/

My android code has a lot more HTML wrapped in and around this module but it kinda worked out where both my android phone and jsfiddle are rendering this the wrong way. So what am I missing?

Also after some testing around I saw that a bunch of "nbsp" are being injected between each li class. I don't know what's causing that but how would I stop it?

Upvotes: 1

Views: 745

Answers (2)

simonshout
simonshout

Reputation: 95

Alright sorry to be that guy but i did do a little more digging and I found a duplicate thread(s):

How do I remove invisible "&nbsp;&nbsp;" which has been automatically added to code

is there a way to highlight all the special accent characters in sublime text or any other text editor?

Upvotes: 1

qais
qais

Reputation: 1888

You need your navbar inside the data-role="tabs".

Here's your modified JSFiddle

Upvotes: 0

Related Questions