1

I'm developing an app with Jquery mobile, the navbar is not displaying the elements in line and google chrome console is showing spaces between the list elements. By removing these &nbsp the elements are perfectly in line. Here you can see: Navbar ---- Console 

<div role="main" class="ui-alt-icon ui-nodisc-icon">
            <div data-role="navbar" data-grid="c">
                <ul>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">One</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Two</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Three</a></li>
                    <li><a href="#" class="ui-btn ui-icon-location ui-btn-icon-top">Four</a></li>
                </ul>
            </div><!-- /navbar -->
        </div>

Can someone help?

Kwr93
  • 59
  • 1
  • 9

3 Answers3

0

seems like there is a CSS rule :before (and also :after) that inserts additional contents into your list elements (in this case the &nbsp;spaces)

(or a jQuery function that does the same)

Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Yeah i found some :active rules of my theme's css but not :before.. anyway i'll use the standard css! Thanks! – Kwr93 Dec 15 '15 at 15:29
0

You do not have to do this with jQuery for a responsive navigation. For the best results, you can use standard markup and CSS for this. Using CSS's display property and media queries you can display and hide the navigation toggle on a certain width or height. See this tutorial for a more in depth answer.

Rev Nosky
  • 75
  • 1
  • 1
  • 9
0

When you copy in paste from the jQuery Mobile demo into your text editor (certainly Sublime) it will carry characters and convert them into nbsp; even when you select the raw code.

Paste the text into a Notepad or even a Google Mail compose window first then re-copy and paste and the random nbsp; characters will be gone.

Daniel Nicolson
  • 41
  • 4