Question

I am facing a very strange issue with dialog…

I am writing an android app using cordova-2.1.0, jquery mobile 1.2.0 and jquery 1.8.2.

In the app I have a dialog box for login as below

Whenever I tap on “Login ID” box, it turns into password field (which is <input type=”text”…
in the code) as following, its miss aligned also…

Once I am done with editing and press my mobile (Samsung Galaxy Geo) back button things turn back to normal…

very strange huh… :O

Edited:Adding Markup

<!-- login window -->
<div data-role="dialog" data-theme="c" id="login" class="force-UI">
    <div data-role="header" data-theme="c">
        <h1>Login</h1>
    </div>
    <div data-role="content">
        <form method="post">
            <div data-role="fieldcontain">
                Login using existing Login ID and Password 
            </div>
            <div data-role="fieldcontain">
                <input type="text" name="username" id="username"
                    placeholder="Login ID">
            </div>
            <div data-role="fieldcontain">
                <input type="password" name="password" id="password"
                    placeholder="Password">
            </div>
            <div data-role="fieldcontain">
                <a href="#" data-role="button" id="loginsubmit2"
                    data-icon="forward" data-iconpos="right">Login</a> <input
                    type="hidden" id="btnClicked" value="" />
            </div>
        </form>
    </div>
</div>

Answer 1

Solution:

I changed

<div data-role="fieldcontain">

to

<p>

Problem solved 🙂