CODEWITHSUNDEEP
javascripthtmlcssjquery-mobile
sathya
sathya

Reputation: 384

How to solve a fixed position of mobile application using HTML and CSS

I am designing a form for mobile application using HTML and CSS. The form has a registration page which contains several text fields. The header and footer positions are fixed.

My problem is when I click on a particular text field (given onfocus functionality to the field) and scroll the page, the screen moves up within the header and footer as they are fixed but the selected field alone goes top of the header. I don't understand why this is happening when the selected text field alone goes up and the rest of the form sculls inside the header.

The below image illustrates my problem:

Problem of mobile

When I select the username text box and scroll up, this field alone goes up to the header and the other fields are scrolling within the header and footer.

Note: here the header and footer are kept fixed.

Updated Code

<body>
<div style="background: #000;height: 60px;position: fixed;  padding: 0 10px;width: 96%;z-index: 9999;" id="header-wrap">
    <header class="center">
<h1 id="logo">
<a href="/">My App</a>
</h1>
<h2 class="mob-usrname" style="display:none;">Mark</h2>
</header>
</div>
<section id="main" class="tabs">
<div class="page-wrap">
<h2>Register</h2>
<form class="form" method="post">
<p>
<label for="id_first_name">First name</label>
<input id="id_first_name" class="textinput" type="text" maxlength="30" value="Dan" name="first_name">
<span class="helptext"></span>
</p>
<p>
<label for="id_last_name">Last name</label>
<input id="id_last_name" class="textinput" type="text" maxlength="30" value="Hibma" name="last_name">
<span class="helptext"></span>
</p>
 <p>
<label for="id_email">E-mail address</label>
                <input id="id_email" class="textinput" type="text" maxlength="75" value="[email protected]" name="email">
<span class="helptext"></span>
</p>
<p>
<label for="id_password1">Password</label>
<input id="id_password1" class="textinput" type="password" name="password1">
<span class="helptext"></span>
 </p>
 <p>
<label for="id_password2">Password Confirmation</label>
<input id="id_password2" class="textinput" type="password" name="password2">
<span class="helptext">Enter the same password as above, for verification.</span>
</p>
<p>
<label for="id_phone">Phone</label>
<input id="id_phone" class="textinput" type="text" maxlength="20" value="257-635-4735" name="phone">
<span class="helptext"></span>
</p>
<p>
<label for="id_button">Button</label>
<input id="id_button" class="textinput" type="text" maxlength="32" value="sample" name="button" readonly="readonly">
<span class="helptext"></span>
 </p>
<input id="submit" type="submit" value="Save">
 </form>
 </div>
</section>
<div style="background:#2C2C2C;bottom: 0;display: block !important;height: 60px;line-height: 60px;position: fixed;width: 100%;" class="mobile-footer" style="display:none">
<ul>
<li class="sam">
<a href="/">
<span></span>
<em>My Footer</em>
</a>
 </li>
<li class="mobile-sample sample">
<a href="/sample/logs">
 <span></span>
<em>logs</em>
 </a>
 </li>
</ul>
</div>   
</body>

Upvotes: 1

Views: 1031

Answers (3)

Omar
Omar

Reputation: 31732

Your page structure for Jquery Mobile should be like the below.

<div data-role="page">

<div data-role="header" data-position="fixed">
    <h1>Page Title</h1>
</div><!-- /header -->

<div data-role="content">
    <p>Page content goes here.</p>
</div><!-- /content -->

<div data-role="footer">
    <h4>Page Footer</h4>
</div><!-- /footer -->

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

Upvotes: 2

btevfik
btevfik

Reputation: 3431

i am not quite sure what is going on. but adding couple of <br> before the register header seems to help.

http://jsfiddle.net/btevfik/M2u8f/

Upvotes: 0

Nilesh
Nilesh

Reputation: 193

See below example

 <body style="margin:0px; padding:0px;">
     <div style="font-size:25px; background:#96F; position:fixed; width:100%;"> HEADER HERE </div>
     <div style="font-size:20px; background:#CCC;">
    MIDDDLES HERE <br />
           <br />
           <br />
           <br />
           <br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />MIDDDLES HERE<br />

   </div>
   <div style="font-size:25px; background:#99F; position:fixed; width:100%; bottom:0; "> <br />FOOTER HERE <br /></div>

Upvotes: 0

Related Questions