navbar width issue when in header and has >= 3 buttons

navbar width issue when in header and has >= 3 buttons

There's an issue in the JQM css that causes the navbar to exceed the width of the rest of the page on mobile devices when the navbar is in the header and contains 3 or more buttons. This results in a thin white line to the right of the page when viewed on a mobile device.

I fixed it by canging ".ui-navbar ul" overflow from visible to hidden (line 1920 of jquery.mobile-1.3.0-beta.1.css). It would, I think, be a good idea for this change to be made in the next release.

  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <title>navbar test</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
  8. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
  9. </head>
  10. <body>
  11.   <div data-role="page" class='type-home' id="index">
  12. <div data-role="header" data-id="header"> <!-- data-position="fixed" data-tap-toggle="false"> -->
  13.    <h2>navbar test</h2>
  14. <div data-role="navbar">
  15. <ul>
  16. <li><a href="#" data-icon="home">Tab1</a></li>
  17. <li><a href="#" data-icon="info">Tab2</a></li>
  18. <li><a href="#" data-icon="info">Tab3</a></li>
  19. </ul>
  20. </div>
  21. </div>
  22. <div data-role="content" data-theme="a" id="index_content">
  23. <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  24. </div>
  25. <div data-role="footer">
  26. <h4>Footer</h4>
  27. </div>
  28. </div>

  30. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  31. <script type="text/javascript" src="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.js"></script>
  32. </body>
  33. </html>