I'm getting white space at bottom of the page in iPad and I use jQuery mobile beta2. I'm splitting the UI as primary and secondary page.
when I move from first page to second page I'm getting white space in bottom of the iPad. Can any one help me?
Thanks in advance.
code:
<div data-role="page" class="type-interior" id="homePage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="contentHomePage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
//page:2
<div data-role="page" class="type-interior" id="resultPage">
<div data-role="header"><label> header </label></div>
<div data-role="content" id="resultPage">
<div class="content-primary">
<div data-role="fieldcontain" data-inset="true" id="search">
<div style="width:40em;"><select tabindex="2" name="select-choice-1" class="ui-select" id="searchIn" data-native-menu="true"></select>
</div>
</div>
</div>
<div class="content-secondary" >
<div data-role="collapsible" data-collapsed="true" data-theme="b">
<ul data-role="listview" id="mainMenuListView" data-theme="a" data-dividertheme="a"></ul>
</div>
</div>
</div>
</div> </div>
Her I found solution for this problem. I set content height.
.ui-content {
min-height: 775px;
}
It's because your 'content-primary' does not take too much space. You can solve it in few ways, but I guess that the most logic one will be to use media queries (CSS) and to set the div dimensions in your CSS file. For more info: http://jquerymobile.com/demos/1.0b3/docs/api/mediahelpers.html
BTW, You might want to use jQuery mobile Beta 3
Related
I am using Cordova with JQuery mobile, it working fine on android, but when made build for Windows Phone 8, the JQM Toolbar(Header and footer) not getting fix, Toolbar little goes up when I am scrolling up page and when I am scrolling down the toolbar little goes down, like below screenshots
http://159.100.223.157/screens/IMG_0712.JPG
http://159.100.223.157/screens/IMG_0713.JPG
here is the code
<div role="main">
<div id="SearchRides" data-role="page" class="page innerPage">
<div class="ui-header ui-bar-a ui-header-fixed header" data-position="fixed">
<h1 aria-level="1" role="heading" class="ui-title">Search</h1>
</div>
<!--end header-->
<div class="projects ui-content content">
<form method="post" action="#">
<div class="ui-field-contain">
<label for="txtFrom" style="text-align: center">Source</label>
<input type="text" name="txtFrom" id="txtFrom" placeholder="To">
</div>
</form>
</div>
<!--end body-->
<div data-theme="a" class="footer" data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li> </li>
</ul>
</div>
<!--end footer-->
</div>
</div></div>
I have try to include a footer with a navbar inside a dialog page, however, the navbar gets bigger than the dialog window. I did try to just include the navbar without the data-role="footer" but is doing the same. Looks like the navbar inside the dialog doesn't inherent the css properties from the dialog parent. Here is the code.
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div role="dialog">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="">
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
anybody with sugestions??
It looks like the borders on the navbar buttons are not considered when setting width. You can fix it with a little CSS
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="" />
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
.ui-dialog-contain .ui-navbar {
padding-right: 4px;
border-bottom-left-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
}
Working DEMO
I did found another way to work around this issue. I just added a overflow:hidden to the data-role="navbar"
<!-- Dialog Add Course Footer -->
<div data-role="navbar" style="overflow:hidden;">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
<!-- End Dialog Add Course Footer -->
I want two scrollable div side by side, but the following html is generating scrollbar for first div only with class "ui-block-a".
<div class="ui-grid-b" style="height:100%;margin-bottom:40px;">
<div data-iscroll="" data-role="content" class="ui-block-a" style="padding-left:40px; padding-right:40px;width:29.95%; max-height:900px;">
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed="false">
<h3>Heading 1st Div</h3>
Data in 1st Div
</div>
</div>
<div data-iscroll='{"resizeWrapper" : false}' class="ui-block-b" style="width:68%; padding-left:4%; padding-right:2%; max-height:900px;">
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed="false">
<h3>Heading 2nd Div</h3>
Data in 2nd Div
</div>
</div>
</div>
This code is not producing a Previous button:
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Actually to get the data-add-back-btn="true" work in latest version of jQuery Mobile 1.4, it should be at the header of the second page.
<div data-role="page" id="2ndPage">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous!">
<h1>HEADER</h1>
</div>
<div data-role="content">
hi
</div>
<div data-role="footer">
<p>FOOTER</p>
</div>
</div>
jQuery Mobile >= 1.4: https://stackoverflow.com/a/20065246/1771795
Adding data-add-btn-back to single page won't generate a button as there is no page before it in DOM nor in navigation history.
If you make two pages, it will appear on the next page.
<!-- page -->
<div data-role="page">
<div data-role="header">
<h1>My Header</h1>
</div>
<a href='#p1'>page 2</a>
</div>
<!-- another page -->
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" id='p1'>
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Demo: http://jsfiddle.net/uJz3E/1/
Ex. Code below is represented as Blue Box, I want to expand 2 grid to Yellow one. But, the problem is; This .. need to be inside content but it always have margin left and right. I don't know how to solve this.
<div data-role="content" data-theme="d" >
<div class="ui-grid-a" >
<div class="ui-block-a"><strong>Time:</strong></div>
<div class="ui-block-b" id="price-order-timestamp">yyyy-mm-dd hh24:mi:ss</div>
</div>
<div style="width:100%;"> <!-- Here-->
<div class="ui-grid-d" id="data-table-header" >
<div class="ui-block-a">Label A</div>
<div class="ui-block-b">Label B</div>
<div class="ui-block-c">Label C</div>
<div class="ui-block-d">Label D</div>
<div class="ui-block-e">Label E</div>
</div>
<div class="ui-grid-d" id="data-table" >
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-e">E</div>
</div>
</div>
</div>
If you want to remove the default padding added to the data-role=content tag, add the following override in your custom.css
#myPageId .ui-content{
padding-left:0;
padding​-right:0;
}​
http://jsfiddle.net/nirmaljpatel/LW5aC/