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>
Related
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 -->
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).
I am failing to correctly organize jQuery Mobile components in the following way:
I was trying to build this fixed searchbar, but after many attemps I ended up here, asking for help.
<div data-role="header" data-position="fixed" data-theme="b">
<a data-role="button" class="ui-btn-lft" href="#pgIndex" data-icon="arrow-l" data-theme="b">Back</a>
<h1>Title</h1>
</div>
<div data-role="header" data-theme="b" id="second-header">
<div style="float:left; width: 75%;">
<select name="selCombo1" id="selCombo1" data-mini="true">
<option value="0">Option 0 - All</option>
</select>
<span style="margin-bottom: 3px;"></span>
<select name="selCombo2" id="selCombo2" data-mini="true">
<option value="0">Option 0 - All</option>
</select>
</div>
<div style="float:right; width: 25%;">
<a data-role="button" data-mini="true" data-icon="search" data-iconpos="top" data-rel="back">Search</a>
</div>
</div>
Is there a simple way to archieve this?
The complete code is on jsFiddle:
http://jsfiddle.net/mbarni/rjdt2/
You can achieve a similar effect to a second header level by appending a div with the classes:
class="ui-bar ui-bar-b"
to your header. Here's a simple example using your code.
JSFiddle Example
For more info, check the bottom of this doc
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
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>