So I'm building a web application using Jquery Mobile and Phonegap. The app was working fine until I removed some input fields and drop down menus which became obsolete.
The problem now is that when I click on the last input field of the page & the ios keyboard activates, the footer bar is no longer fixed and there is a white gap between the footer bar and the ios keypad. When the keypad hides again I see the full page but the white gap is above the footer.
This doesn't seem to be a problem on the Android platform so I'm wondering if it is a CSS issue. Help is most certainly welcome. Here's the page code in question...
<div data-role="page" data-theme="f" id="">
<div data-role="header" class="ui-state-persist">
<h1>text</h1>
</div>
<div data-role="content">
<label for="">Text</label>
<input type="text" name="text" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="" name="" id="" value="" class="input-field required"/>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
Try the following code (using jQuery Mobile version 1.2.0):
<div data-role="page" data-theme="f" id="quickquote_insured">
<div data-role="header" class="ui-state-persist">
<h1>Contact Details</h1>
</div>
<div data-role="content">
<label for="quickquote-insured_initials">Initials:</label>
<input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
<label for="quickquote-insured_surname">Surname:</label>
<input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
<label for="quickquote-insured_phone_number">Mobile number:</label>
<input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
<label for="quickquote-insured_email_address">e-Mail address:</label>
<input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>
<br>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
</div>
I know it may look simple, but I just added a <br> just under your email input field.
I think the problem is that, since your footer is "static", you need to "fill" your page.
For example, if you have few fields on your page and if you don't "fill" your page, you'll get the following result:
Hope this helps.
Related
I have a simple form that uses Google ReCaptcha v2 to verify. Its working fine on desktop/ipad and iphone on all browsers I have tested so far. The problem I have discovered is that when I click "I'm not a robot" on the smaller iphone screen in portrait mode - the images attempt to display below the form - and as the form is at the bottom of the page - it ends up cutting off like this:
<div class="col-md-6">
<p><b>CONTACT FORM</b>
</p>
<form role="form" id="form" action="form.php" method="post">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Enter name">
<span class="help-block" style="display: none;">Please enter your name.</span>
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Enter email">
<span class="help-block" style="display: none;">Please enter a valid e-mail address.</span>
<label for="message">Message</label>
<textarea class="form-control" rows="7" id="message" name="message" placeholder="Enter message"></textarea>
<span class="help-block" style="display: none;">Please enter a message.</span>
</div>
<div class="form-group">
<div class="g-recaptcha" data-theme="dark" data-sitekey="INSERT DATA SITE KEY HERE"></div>
<span class="help-block" style="display: none;">Please check that you are not a robot.</span>
</div>
<button type="submit" id="Submit" data-loading-text="Sending..." class="btn btn-default">Send Message</button>
</form>
</div>
When I rotate iPhone to landscape - it then displays the images above the reCaptcha widget which is good. But rotate back to portrait it tries to display the pictures below the widget - and cuts off anything below the end of page - and inserts a big white space. Any ideas what I can do to resolve?
I'm implementing jquerymobile themes via themeroller shared. I have applied two swatches a and b buttons are blue but flip switch is orange.
How can I apply both themes in one page?
I have tried this:
<fieldset data-role="controlgroup">
<div class="ui-field-contain">
<label for="txtEmail" class="ui-hidden-accessible"></label>
<input name="txtEmail" id="txtEmail" placeholder="Email" value="" type="text" data-clear-btn="true" data-theme="a" />
</div>
<div class="ui-field-contain">
<label for="txtPassword" class="ui-hidden-accessible"></label>
<input name="txtPassword" id="txtPassword" placeholder="Password" value="" type="password" data-clear-btn="true" data-theme="a" />
</div>
<div class="containing-element" >
<label class="fliplabel" for="flipRemember">Remember me:</label>
<select id="flipRemember" name="flipRemember" data-role="slider" data-theme="b" >
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div class="ui-field-contain" class="fieldbutton">
<a id="btnSignin" data-theme="a" data-role="button" data-theme="a" href="javascript:void(0);">Sign In</a>
</div>
</fieldset>
What you've got there should work. You'll need to include the jquerymobile.js and jquerymobile.css, as well as your theme's css file. Aside from that, you can apply theme directly to parts of a page (either jquerymobile controls, or general page elements) by using the theme related css classes such as ui-body-b (shown here at the bottom of the page). I've put together a jsfiddle as well to give an example
I am attempting to set up a page using JQuery Mobile, where I have a 3 column grid, with a label, a text input and a set of horizonally-aligned radio-buttons. For some reason Grid-element c sets it's height larger than the other 2, and I can't seem to force the first 2 cells to align with it.
An example of the code is at: http://jsfiddle.net/5WSj4/1/
Here is the code in question
<div data-role="page" id="page_fullDialog">
<div id="dialog_main" data-role="content">
<fieldset class="ui-grid-b">
<div class="ui-block-a" style="width:30%">
<label style="vertical-align:top" data-mini="true" for="leagueNameInput">League Name:</label>
</div>
<div class="ui-block-b" style="width:10%">
<input type="text" style="vertical-align:top" data-mini="true" name="leagueNameInput" id="leagueNameInput" maxlength="4" value="" data-mini="true" />
</div>
<div class="ui-block-c" style="width:60%; text-align: right;">
<div data-role="fieldcontain" data-mini="true">
<fieldset data-role="controlgroup" data-mini="true" data-type="horizontal">
<!-- <legend>Difficulty:</legend> -->
<input type="radio" name="difficulty" id="difficultyEasy" value="choice-1" />
<label for="difficultyEasy">Easy</label>
<input type="radio" name="difficulty" id="difficultyMedium" value="choice-2" checked="checked" />
<label for="difficultyMedium">Medium</label>
<input type="radio" name="difficulty" id="difficultyHard" value="choice-2" />
<label for="difficultyHard">Hard</label>
</fieldset>
</div>
</div>
</fieldset>
</div>
</div>
Any help with this would be greatly appreciated.
For some bizarre reason, ui-controlgroup has a top margin of 0.5em. Overriding it in the fieldset element solves the problem, i.e.
style="margin-top: 0px;"
I have a JQuery Mobile dialog with a form on it:
<form action="send" method="post">
<input type="text"/>
<input type="submit" />
</form>
What I want is that when the form is submitted, I just want to close the dialog or go back to the previous page. How to do it with JQM.
Try adjust next sample to your solution:
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<form>
<div style="padding:10px 20px;">
<h3>Please sign in</h3>
<label for="un" class="ui-hidden-accessible">Username:</label>
<input type="text" name="user" id="un" value="" placeholder="username" data-theme="a" />
<label for="pw" class="ui-hidden-accessible">Password:</label>
<input type="password" name="pass" id="pw" value="" placeholder="password" data-theme="a" />
<button type="submit" data-theme="b">Sign in</button>
</div>
</form>
</div>
I have a very simple jquery mobile page. It has a header, a footer and the body has asks for login and password with textboxes, and then you can submit.
My problem is that jQuery Mobile makes the textboxes hold about 100 characters, making my entire display way too small. Is there a way to force it to make the textboxes only hold about 12 characters and then make everything in the body larger?
Here is my code:
<div data-role="page" id="login">
<div data-role="header">
<h1>heade</h1>
</div>
<div data-role="content">
<form action="login.py" id="login_form" data-ajax="false">
<div data-role="fieldcontain">
<label for="name" style="font-size: px; font-weight: bold;"> User Name: </label>
<input type="text" name="uname" minlength="3" />
</div>
<div data-role="fieldcontain">
<label for="password"> Password: </label>
<input type="password" name="password" />
</div>
<div id="submitDiv" data-role="fieldcontain">
<fieldset class="ui-grid-a">
<div class="ui-block-a">
<input type="reset" value="Reset" />
</div>
<div class="ui-block-b">
<input type="submit" value="Submit" />
</div>
</fieldset>
</div>
</form>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
</ul>
</div>
</div>
</div>
I see this post is old, but maybe this will help someone...
Did you try adding something like this to your css?
div input { width: 12px !important; }