0

I'm using JQuery Mobile 1.4.5, and I have no custom CSS of any kind. Code:

<div data-role="page" id="page-id">
    ...
    <div data-role="footer" data-position="fixed" style="overflow:hidden;" data-hide-during-focus="false">
      <div data-role="navbar">
        <ul>
          <li><a href="#" class="ui-btn-active">Navbar 1</a></li>
          <li><a href="#">Navbar 2</a></li>
          <li><a href="#">Navbar 3</a></li>
          <li><a href="#">Navbar 4</a></li>
          <li><a href="#">Navbar 5</a></li>
        </ul>
      </div><!-- /navbar -->
    </div><!-- /footer -->
</div>

The last element in the navbar list is displaying on the next line, as if text wrapped.

enter image description here

I cannot figure out what is causing the last element to be misaligned like that.

I have tried this in various different elements on the page, as well as with 2, 3, 4, and 5 elements in the list. The behavior is the same, regardless of browser (Safari or Chrome).

Can anyone help?

dneaster3
  • 309
  • 1
  • 3
  • 10
  • I tried the given code in Chrome, Safari and Firefox and it looks good. Maybe it's related to surrounding HTML? Here your code as [Fiddle](http://jsfiddle.net/uzofauya/) – Steffi A. Mar 03 '15 at 01:46

1 Answers1

1

The issue is not caused by JQuery Mobile, but actually by the text editor (in this case Sublime Text 3) displaying a regular space character and a UNICODE space character the same way.

The UNICODE spaces--which were left over from a copy-paste from a source document--are converted by the browser into &nbsp;'s, which then cause the line-wrapping issue. enter image description here

Replacing the UNICODE spaces with space-bar spaces in the HTML fixed the issue. enter image description here

For Sublime Text users, to avoid this in the future install the Unicode Character Highlighter package.

dneaster3
  • 309
  • 1
  • 3
  • 10
  • This is a duplicate question and answer, but the others were titled in such a way that they did not show up in my searches. Links in the following comments. – dneaster3 Mar 03 '15 at 14:49
  • [jquery mobile tabs are not aligned](http://stackoverflow.com/questions/28444020/jquery-mobile-tabs-are-not-aligned) – dneaster3 Mar 03 '15 at 14:52
  • [How do I remove invisible “  ” which has been automatically added to code](http://stackoverflow.com/questions/28110467/how-do-i-remove-invisible-nbspnbsp-which-has-been-automatically-added-to-c) – dneaster3 Mar 03 '15 at 14:52