CODEWITHSUNDEEP
jqueryiosjquery-mobilecordova
Sishu
Sishu

Reputation: 1558

Jquerymobile footer issue comes little upside sometimes

I am making a phonegap application by using jquery mobile app.I am attaching snaps to understand my problem it is about the footer it is not fixed and sometimes it comes up little up.

<html>
<head>
    <link rel="stylesheet" href="css/styles.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
    <script src="js/jquery.js"></script>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    <script type="text/javascript" charset="utf-8">
        function logIn()
        {
            alert("sfdsf");
        }
        </script>
</head>
<body>
        <div data-role=page id=home>
        <div data-role=header>
        <h1>Home</h1>
        </div>
        <div data-role=content>
        <span> Name </span>
        <input type=text value=Sarrion style="width:100%;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing: border-box;">
        <br>
        <span>Password</span>
        <input type=password class="miniinputheight">
        <span> Choose an apartment type : </span>
        <select data-native-menu=false>
        <option>  bedroom </option>
        <option value=2> 1 bedrooms </option>
        <option value=3> 2 bedrooms </option>
        <option value=4> 3 bedrooms </option>
        <option value=5> 4 bedrooms </option>
        </select>
        <br>
            <form>

        <input type=button value="New Page" onclick="window.location.href='index1.html'">
            </form>

        </div>
        <div data-role=footer data-position="fixed">
        <h1 >Thanks</h1>
        </div>
</div>
</body>

enter image description here

enter image description here

Upvotes: 0

Views: 201

Answers (1)

Akshay
Akshay

Reputation: 197

I test your Code, it works fine.. Normally this problem arises due to, when you place your "footer div" inside the "content div". But in your code it is correct...

try these silly corrections-

replace

data-role=page, data-role=content, data-role=footer

TO

data-role="page", data-role="content", data-role="footer"

I mean place them in double quotes "", and Also close your HTML tag

Upvotes: 1

Related Questions