I have built an app using JQuery 1.1.0 and Phonegap. The problem I have now is that when I input text into a field and I tap on the ios keypad's 'previous" & "Next" buttons, the header moves -momentarily- from its fixed position and appears at different positions on the page. I must add that it is also inconsistent as it doesn't do this on other pages. The headers are marked as fixed, so I have no idea why they would sometimes appear and sometimes not.
This part of a multipage is an example of a page that works 'most of the time', but sometimes the header would slide in an out of the screen as I navigate between fields.
<div data-role="page" id="accident_detail" data-theme="f">
<div data-role="header" data-position="fixed">
<h1>Description</h1>
</div>
<div data-role="content">
<label for="incident_date">Date of Incident:</label>
<input type="date" name="incident_date" id="incident_date" value="" class="required"/>
<label for="incident_description">Description of Incident:</label>
<textarea cols="40" rows="8" name="incident_description" id="incident_description" class="required"></textarea>
<label for="accident_damage">Damage description:</label>
<textarea cols="40" rows="8" name="accident_damage" id="accident_damage"></textarea>
<label for="location_street">Street:</label>
<input type="text" name="location_street" id="location_street" value="" class="required"/>
<label for="location_city">City:</label>
<input type="text" name="location_city" id="location_city" value="" class="required"/></div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#accident_menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Done</a>
<a href="index.html" rel="external" data-icon="home" data-direction="reverse" data-iconpos="notext"
style="float: right; margin-right: 10px; margin-top: 5px"></a>
</div>
</div>
Any help would be appreciated.
YOU CAN TRY THIS..
<div data-role="page" id="myPage">
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<a data-icon="back" data-transition="none">Back</a>
<h1>PAGE TITLE</h1>
</div>
</div>
Related
can you please tell me how to make different label with different colour ?
It will change all label with red colour.
http://jsfiddle.net/GZaqz/4/
<div data-role="page" id="FirstPage" data-position="fixed" >
<div data-role="header" data-position="fixed" data-tap-toggle="false">
<label class="labelClass" id="openSubmenu">Move to Second Page:</label>
</div>
<div data-role="content">
<div >
<a data-role="button" class="custom-btn" data-corners="false" id="test">Level 5</a>
<a data-role="button" class="custom-btn">Level 5</a>
</div>
<div >
<label class="caseName_h">user name</label>
</div>
<div data-role="fieldcontain" class="">
<label data-role="none" for="name" class="test1">Phoneyy</label>
<input style="width: 280px;" data-role="none" type="text" name="basic" value="" />
</div>
<div data-role="fieldcontain" class="ui-field-contain ui-body ui-br">
<label for="basic">Phone</label>
<input style="width: 280px;" data-role="none" type="text" name="name" id="basic" value="" />
</div>
</div>
</div>
Usually JQM use the attribute data-theme to assign a color to a form or whatever..
Actually I don't remember if there is same attribute for labels.
you probably want to have a look here: Theme JQM and here: Content Theme JQM
Can you please tell me why copy, paste option appears after tapping the button for 5 seconds in jQuery mobile? Actually I am using jQuery mobile When I Add button and tap on that it show copy paste select all options?
<div class="ui-grid-c">
<div class="ui-block-a" style="width: 30%;" >
<input name="text-12" id="text-12" value="" type="text" autocorrect="off" class="searchbox">
</div>
<div class="ui-block-b">
Search
</div>
<div class="ui-block-c" style="margin-left: 5px;">
<a href="#" data-role="button" data-corners="false" data-inline="true" id="next" class="searchNext" disabled>Next</a>
</div>
<div class="ui-block-d" style="margin-left: 30px;">
<a href="#" data-role="button" data-corners="false" data-inline="true" id="prev" class="searchPrev" disabled>Previous</a>
</div>
Please Take a look On this link
Apache Cordova: remove tap-hold link menu
Disable copy on jquery mobile button over PhoneGap
Use This
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
}
and only enable something you like:
input {
-webkit-user-select: auto;
}
I am using jquery mobile .In my header i have three button i open pop up screen on clicking the button .But the problem is that i click the (+) button pop up size is large (looking fine) But when click the setting button(first one) it size reduce why ? having similar contend .I need to increase the size of pop screen. Here is my code.
http://jsfiddle.net/ravi1989/HesVd/16/
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
Add
Edit
</div>
</div>
<!--div data-role="content">
<div id="here_table" class="scrollable" data-scroll="y" style ="height:400px" > </div>
</div-->
<div data-role="content">
<ul data-role="listview" data-inset="true" id="here_table" >
</ul>
<!--- CaseInformationScreen Popup screen---------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none" data-overlay-theme="a" data-dismissible="false">
<div data-role="header" data-theme="b" >
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
<!--- CaseInformationScreen Popup screen End---------------------------->
<!--- User Setting Popup screen---------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
<!--- User Setting Popup screen End---------------------------->
</div>
</div>
Problem with jQuery Mobile is that it has an internal logic of building responsive content.
Unless you specify values manually jQuery Mobile will provide them for you. In your case problem is in text area, its default values are wider then larges element (button) on a previous popup.
That's why it is important to set popup width manually, it is even advised by official documentation.
Working example: http://jsfiddle.net/Gajotres/2752A/
HTML :
<!--- User Setting Popup screen---------------------------->
<div data-role="popup" id="UserSettingScreen" data-close-btn="none" style="max-width:300px !important; width: 300px !important">
<div data-role="header" data-theme="b" >
Cancel
<h1>User Settings</h1>
Ok
</div>
<div data-role="content" data-theme="b" >
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">IP Address:</label>
<input name="text-12" id="text-12" value="" type="text"/>
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Display Font:</label>
<select name="select-choice-1" id="select-choice-1">
<option value="standard">A</option>
<option value="rush">B</option>
</select>
</div>
</div>
</div>
If you take a look I have added a style attribute to popup container:
style="max-width:300px !important; width: 300px !important"
One more thing, popup content is now wrapped into a data-role="content" so that padding can be applied to it.
I have one page and one pop up page i want to show pop up screen on clicking a button .I have header on both pop up screen and page but when i click the button the pop up is display but it css is not well as actual .
I am using jquery mobile .
Here is my fiddle
<div data-role="page" id="Home" >
<div data-role="header" data-theme="b" data-position="fixed" >
<h1 class="ui-title" id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
<div class="ui-btn-right" id="addbuttons" data-role="controlgroup" data-type="horizontal">
Setting
<a href="#" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" >Add</a>
Edit
</div>
</div>
</div>
</div-->
<ul data-role="listview" data-inset="true" id="here_table" >
</ul>
</div>
</div>
<!-- Page two Case Information Screen-------------------------->
<div data-role="popup" id="CaseInformationScreen" data-close-btn="none">
<div data-role="header" data-theme="d" data-position="fixed">
Cancel
<h1>Case Information</h1>
Add
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="text-12" style="text-align:left;margin-left: 0px;">Case Date:</label>
<input name="text-12" id="text-12" value="" type="text">
</div>
<div data-role="fieldcontain">
<label for="textarea-12">Textarea:</label>
<textarea cols="40" rows="8" name="textarea-12" id="textarea-12"></textarea>
</div>
</div>
Here's a demo : http://jsfiddle.net/hungerpain/HesVd/3/
What I've changed in your demo
I changed your HTML structure a lil bit :
<div data-role="page" id="Home">
<div data-role="header"></div>
<div data-role="content"></div>
</div>
<div data-role="popup" id="CaseInformationScreen"></div>
| |
| |
\ /
\ /
\ /
<div data-role="page" id="Home">
<div data-role="header"></div>
<div data-role="content">
<div data-role="popup" id="CaseInformationScreen"></div>
</div>
</div>
The reason is because popup has to lie inside page. Only then will the styling remain.
I removed the code you'd put for popup to fire and added it inline in the HTML like this:
Add
Note that I've added only the changed attributes. The rest of the attributes are in demo.
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; }