Search code examples
htmljquery-mobilesublimetextsublimetext3jquery-mobile-navbar

JQuery Mobile : navbar inside footer last element displaying incorrectly

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?

Solution

  • 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.