JQuery Mobile tabs are not aligned

Question

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?

Can you please post your JSFiddle link – qais Feb 10 '15 at 23:52 — qais, Feb 10 '15 at 23:52
https://jsfiddle.net/simonshout/18sssw7m/ – simonshout Feb 10 '15 at 23:59 — simonshout, Feb 10 '15 at 23:59

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

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 "  " 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?

edited May 23 '17 at 11:50

Community

1
1

answered Feb 11 '15 at 00:19

simonshout

95
3
14

score 0 · Answer 2 · answered Feb 11 '15 at 00:14

0

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

Here's your modified JSFiddle

answered Feb 11 '15 at 00:14

qais

1,808
3
20
31

JQuery Mobile tabs are not aligned

2 Answers2

Linked