Home/ Questions/Q 8307423
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T18:31:17+00:00

I have a really annoying issue whereby the persistent jQuery nav bars are appearing

  • 0

I have a really annoying issue whereby the persistent jQuery nav bars are appearing outside of the content width, much wider than the rest of the content on the page, this is what I see when I preview my HTML :

enter image description here

Using <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" /> in the <head> it should set the content width to be the device width, which it has for the header and text element, but not for the nav bars.

This is my full HTML file for the above :

<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
    <link rel="stylesheet" href="css/reset.css" />
    <link rel="stylesheet" href="css/SmartConf.css" />
    <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
</head> 
<body onload="WL.Client.init({})" id="content"> 

    <div data-role="page">

        <div data-role="header">
            <h1>Home</h1>
        </div><!-- /header -->

        <div data-role="content">
        <p>Home</p> 
        </div><!-- /content -->

        <div data-role="footer" data-id="foo1" data-position="fixed">
            <div data-role="navbar">
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="tweets.html">Tweets</a></li>

                </ul>
            </div><!-- /navbar -->
        </div><!-- /footer -->

    </div><!-- /page -->

    <script src="js/SmartConf.js"></script>
    <script src="js/messages.js"></script>
    <script src="js/auth.js"></script>
    <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
</body>
</html>

Is there a way of squeezing the nav bars into the main content window?

Thanks

EDIT:

If I drop id="content" from the body tag, then the width adjusts correctly, however by doing so I get various failures in the Worklight startup, as its referencing the “content” ID tag, therefore I believe there is a conflict as both the body and the div are competing for the ID of content…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove those two lines:

    <link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/SmartConf.css" />
    • 0