Search jQuery

jQuery Forum

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

in jQuery Mobile • 10 years ago

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.

<!DOCTYPE html>
<html>
<head>
<title>navbar test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-beta.1/jquery.mobile-1.3.0-beta.1.min.css" />
</head>
<body>
<div data-role="page" class='type-home' id="index">
<div data-role="header" data-id="header">
<h2>navbar test</h2>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="home">Tab1</a></li>
<li><a href="#" data-icon="info">Tab2</a></li>
<li><a href="#" data-icon="info">Tab3</a></li>
</ul>
</div>
</div>
<div data-role="content" data-theme="a" id="index_content">
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<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>
</body>
</html>

Replies(2)

watusiware

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

10 years ago

1. I would be cautious about using jQuery 1.8.3. I see that the compatibility listed for jQuery Mobile 1.3beta1 has just been bumped-up to 1.9, but keep in mind that this is a beta test. So, 1.9 is a goal, not a guarantee. I'd stick with 1.8.2, which is the highest version that can be used with JQM 1.2, and was listed as the highest version to be used with 1.3beta when they started the beta test.

2. Why the unconventional load order? Try loading your scripts in the <head> section as recommended in the documentation.

3. Issues and pull requests should be raised here:

https://github.com/jquery/jquery-mobile/issues

This forum is not a good place to submit bug reports or suggest improvements. It's good, of course, to use this forum to let other users know about potential issues.

cricto

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

10 years ago

Thank you for the tips, I will report the problem at the link you posted. Changing the load order and the jQuery version are good suggestions, but don't affect the navbar issue.

Top Reply

Response title

Attachments

jQuery Forum

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

Replies(2)

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

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

Statistics

Tags

Actions