CODEWITHSUNDEEP
cssjspjquery-mobile
user474901
user474901

Reputation:

jQuery-mobile footer Style issue?

I have 2 problems with my jQuery-mobile using JSP the first is my web page is not adjust to screen size "see the screen shoot" and my background must be white is all black my header most be black html enter image description here

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head id="j_idt2">
        <title>First Mobile JSF page</title>
        <meta name="viewport" content="width=500, initial-scale=1" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>  
        <style>
            #box1 {
                margin-left: 25%;
                margin-top: 55%;
                width: 50%;
                border-style: solid;

            }
        </style></head><body>
<form id="j_idt5" name="j_idt5" method="post" action="/WebApplication1/faces/index.xhtml;jsessionid=1a059ff206049c9e2318396c28bf" enctype="application/x-www-form-urlencoded">
<input type="hidden" name="j_idt5" value="j_idt5" />

        <div data-role="page" home="home">
            <div data-role="header">
                <h1>Sample Mobile #1</h1>
                <div data-role="content">
                    <p>Welcome to </p>
                    name<input id="j_idt5:userName" type="text" name="j_idt5:userName" size="5" /><input id="j_idt5:something" type="submit" name="j_idt5:something" value="doSomething" />
                    <div id="box1"> </div>
                </div>
            </div>

            <div data-role="footer" data-postion="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a href="WebApplication1" data-ajax="false">Example 1</a> </li>
                        <li><a href="WebApplication1" data-ajax="false">Example 2</a> </li>
                        <li><a href="WebApplication1" data-ajax="false">Example 3</a> </li>
                    </ul>
                </div>            
            </div>  
        </div><input type="hidden" name="javax.faces.ViewState" id="j_id1:javax.faces.ViewState:0" value="4958076424142593255:-1635836014572318330" autocomplete="off" />
</form></body>
</html>

Upvotes: 0

Views: 238

Answers (1)

Gajotres
Gajotres

Reputation: 57309

You have several errors:

  1. Your content div is inside your header div, move it level above, basically change this:

    <div data-role="header">
    <h1>Sample Mobile #1</h1>
    <div data-role="content">
        <p>Welcome to </p>
        name<input id="j_idt5:userName" type="text" name="j_idt5:userName" size="5" /><input id="j_idt5:something" type="submit" name="j_idt5:something" value="doSomething" />
        <div id="box1"> </div>
    </div>
</div>

    to this:

    <div data-role="header">
    <h1>Sample Mobile #1</h1>
</div>

<div data-role="content">
    <p>Welcome to </p>
    name<input id="j_idt5:userName" type="text" name="j_idt5:userName" size="5" /><input id="j_idt5:something" type="submit" name="j_idt5:something" value="doSomething" />
    <div id="box1"> </div>
</div>

    This will solve color problem.

  2. What did you set margin to your page container? This is a probably cause for your page screen size problem.

  3. Use proper viewport meta tag:

    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>

Upvotes: 1

Related Questions