I used the data-role="footer" but I want 2 links below that blue bar to also be part of the footer.
<div data-role="footer" class="footer" id="ftrMain" name="ftrMain" data-position="fixed">
© 2011 Probity Investigations
</div>
<div data-role="footer" id="subfooter" name="subfooter" >
<div style="float: left;">
Full Site
</div>
<div style="float: right;">
Logout
</div>
</div>
Then I want to fix it to bottom. I tried creating the second footer with data-theme="c" but it doesnt quite match.
Basically like this:
http://i.stack.imgur.com/sfl6g.png
Not exactly like the picture but maybe you could play with it.
Live Example: http://jsfiddle.net/gN5Fy/20/
Documentation on navbars: http://jquerymobile.com/demos/1.0a4.1/#docs/toolbars/docs-navbar.html
This finally fixed it:
<div data-role="footer" class="ui-bar" data-position="fixed">
Full Site
<a style="float:right; margin-right:25px;" href="logout.php" rel="external" data-role="button">Logout</a>
<div style="margin: 0 auto; width: 230px; bottom: 30px; position: relative;">© 2011 Probity Investigations</div>
</div>
Related
Am using Jquery Mobile 1.3.1 on Worklight 6. When I use a fixed header and content. The header always seem to overlap the content. Please suggest what I am doing wrong.
<body id="content" style="display: none;">
<div data-role="page" id="basic">
<div data-role ="header" data-position="fixed">
<h3>CORS</h3>
</div>
<div data-role="content">
<form id="basic-information">
<div data-role="collapsible-set" data-theme="c" data-content-theme="d" data-inset="false">
<div data-role="collapsible">
<h3>Basic Information</h3>
<fieldset data-role="controlgroup" data-type="horizontal"
data-mini="true">
Not sure what's up with jQuery Mobile, but it seems to originate from there (tested with jQuery Mobile 1.4.2, happens there as well).
To fix, I have added the following to common\css\main.css:
.ui-page-header-fixed { padding-top: 15px !important; }
BTW,
Your code snippet is cut... (not full).
As the title says,
When i use a input field in a jquery mobile page, it doesnt expand the input fields to the full width of the screen.
If you use a small screen device, it fits fine but when you view the page in a desktop browser, the input fields only appears 2/3 of the width of the browser.
Is there a way to set it to expand to whatever the browser/screens width is?
here is my code:
http://jsfiddle.net/B8JDt/2/
<body>
<div data-role="page" id="page" onLoad="initialiseFields()">
<div data-role="header" data-position="fixed" data-theme="b" data-tap-toggle="false" data-transition="none" > Back
<h1>New Claim</h1>
</div>
<div data-role="content">
<ul class="ui-li" data-role="listview" id="list" data-inset="true" data-scroll="true">
<li data-role="list-divider">
<h2 id="itemTitle">Title</h2>
</li>
<li>
<h3>Journey From:</h3>
<div data-role="fieldcontain">
<input type="text" name="claimTitle" id="textFieldJourneyFrom" value="" />
</div>
</li>
<li>
<h3>Journey To:</h3>
<div data-role="fieldcontain">
<input type="text" name="claimTitle" id="textFieldJourneyTo" value="" />
</div>
</li>
</ul>
<div data-role="navbar">
<ul>
<li>Save</li>
</ul>
</div>
</div>
</div>
</body>
jQuery Mobile has a buggy implementation of box-resizing CSS3 rule.
To fix this problem use this CSS:
#media all and (min-width: 28em){
.ui-input-text {
box-sizing: none !important;
-moz-box-sizing: none !important;
-webkit-box-sizing: none !important;
width: 100% !important;
display: inline-block !important;
}
}
Fist box-sizing: none don't exist but it will override default value and it is better to override it like this then to remove it manually from a css file.
Working example: http://jsfiddle.net/B8JDt/3/
How can I force the heading to be visible, and the text below overflow into ellipsis? I can't get it to work with the BlackBerry list item when the page is wider than 768px.
http://jsfiddle.net/TeNXG/14/
<div data-role="page" data-theme="a" id="demo-page" class="my-page" data-url="demo-page">
<div data-role="header">
<h1>News</h1>
Back
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview">
<li><a href="#">
<img src="http://view.jquerymobile.com/master/docs/_assets/img/apple.png">
<h2>iOS 6.1</h2>
<p>Apple released iOS 6.1</p>
<p class="ui-li-aside">iOS</p>
</a></li>
<li><a href="#">
<img src="http://view.jquerymobile.com/master/docs/_assets/img/blackberry_10.png">
<h2>BlackBerry 10</h2>
<p>BlackBerry launched the Z10 and Q10 with the new BB10 OS and more and stuff and lots of stuff and overflowing and stuff and wow so much text man holy mess even more let's see just how jacked we can make this div</p>
<p class="ui-li-aside">BlackBerry</p>
</a></li>
</ul>
</div><!-- /content -->
<div data-role="footer" data-theme="none">
<h3>Responsive Grid Listview</h3>
</div><!-- /footer -->
Add white-space: nowrap; to the description block:
ui-listview .ui-li-desc {
white-space: nowrap;
overflow: visible;
position: absolute;
left: 0;
right: 0;
}
See the updated jsFiddle.
This used to work to center the controlgroup in 1.1.0, but now it seems like it doesn't in 1.1.1.
<div data-theme="a" data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
link1
link2
</div>
<div class="copy">© 2012 bigco</div>
</div>
Probably align="center" attribute of data-role="controlgroup" div could be suitable for that.
<div data-theme="a" data-role="footer" align="center">
<div data-role="controlgroup" data-type="horizontal" data-mini="true">
link1
link2
</div>
<div class="copy">© 2012 bigco</div>
</div>
http://jsfiddle.net/sGFTy/1/
I found the solution on this site:
http://forum.jquery.com/topic/how-to-horizontally-center-a-set-of-grouped-buttons
The CSS:
#navgroup {text-align:center;}
#navgroup div {display:inline-block;}
The HTML:
<div id="navgroup">
<div data-role="controlgroup" data-type="horizontal">
Menu
Specials
FAQ
Facebook
</div>
</div>
Issue still persists if using
$("selector").show();
to display element since it applies 'display:block'.
Instead of using .show(), now use
$("selector").css('display', 'inline-block');
Now I'm on JQM 1.2 and this works for me...
CSS
.center-controlgroup { text-align: center; }
HTML
<div data-role="controlgroup" data-type="horizontal" class="center-controlgroup">...</div>
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