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).
Related
I'm using jQuery Mobile and no matter how much content is on the page there is always a scrollbar that appears to the right. Even turning on overflow-hidden doesn't make it go away. The page has nothing but a header, a link, and a panel. How can it be removed?
The HTML is roughly as follows:
<body>
<!-- Document framework -->
<div data-role="page">
<div data-role="panel" id="toolmenu" data-theme="a">
<form>
<fieldset data-role="controlgroup">
<legend>Select Tool:</legend>
<input name="radio-choice-v-2" id="radio-choice-v-2a" value="on" checked="checked" type="radio">
<label for="radio-choice-v-2a">One</label>
<input name="radio-choice-v-2" id="radio-choice-v-2b" value="off" type="radio">
<label for="radio-choice-v-2b">Two</label>
<input name="radio-choice-v-2" id="radio-choice-v-2c" value="other" type="radio">
<label for="radio-choice-v-2c">Three</label>
</fieldset>
</form>
</div>
<div data-role="header">
<h1>TITLE</h1>
</div>
<div data-role="content">
Stuff<br />
Open panel link
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
Thanks.
I solved the problem. The issue was that I had the css files in the wrong order. When you are using a custom theme with jquery mobile, you have to have the css files in a particular order--namely, your themeroller-created custom theme has to come BEFORE the jquery mobile css, and you have to use jquery.mobile.structure-1.4.2.min.css (or the equivalent for whatever version you are using anyway), not the full css file.
I am having a problem with nested popups with v1.4.0.RC.1. It works in v1.3.2. I have a footer, which has a button, which opens a popup, which contains a listview, and one of the listitems opens a popup. Again, in v1.3.2, this works as expected... but not with v1.4.0.RC.1. I understand that v1.4 isn't out yet, but I pose this issue anyway as someone may have some insight that I haven't come up with yet. I have a fiddle for both versions. The code for each is exactly the same. The only difference is that the first fiddle uses the 1.3.2 libraries and the second fiddle uses the v1.4.0 libraries.
Also, I have seen answers linking to a jQM popup page, showing that the page itself indicates that chaining popups isn't allowed. However, that's typically a v1.2.0 of jQM. The popup demo in v1.3.2 doesn't indicate that restriction, and is supported by the fact that it does in fact work (see fiddle below).
That being said, if anybody has any guidance or information, I'd really appreciate it. I've poured through the limited 1.4.0 documentation and the interwebs and the only thing I can come up with is doing a setTimeout within the popupafterclose event to open another popup. That seems like a sloppy hack to me, and I'd like to avoid doing that if at all possible.
Anyway, below is code and fiddles for 1.3.2 and 1.4.0.RC.1.
Thanks!
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.3.2</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.3.2 above
<div data-role="page" id="pgMain">
<!-- HEADER -->
<div id="hdrMain" data-role="header">
<h1>Popups from popups using jQM-1.4.0.RC.1</h1>
</div>
<!-- CONTENT -->
<div data-role="content" id="contMain">
With jQM-1.3.2, the menu button down there opens a popup window as a menu. In the popup window is a listview, and the "Delete" listitem calls another popup to confirm deletion.<br/><br/>With jQM-1.4.0.RC.1, the second popup doesn't work.
</div>
<!-- FOOTER -->
<div id="ftrMain" data-role="footer" data-position="fixed" data-tap-toggle="false">
<div class="ui-btn-inline ui-shadow" style="margin-left:5px; margin-right:2px;" data-role="controlgroup" data-type="horizontal" data-mini="true">
Menu <--- Click this...
</div>
</div>
<!-- POPUP: SELECTED ITEMS MENU -->
<div id="mnuSelectedItemsMenu" data-role="popup">
<ul id="lvItemMenu" style="min-width: 210px;" data-role="listview" data-inset="true" data-icon="">
<li>Edit</li>
<li>Delete <--- ...then this</li>
<li data-role="list-divider" style="padding:2px 0px 0px 0px;"></li>
<li>Select All</li>
</ul>
</div>
<!-- POPUP: CONFIRM DELETE DIALOG -->
<div id="popupConfirmDelete" class="ui-corner-all" data-role="popup" data-overlay-theme="a" data-dismissible="false">
<div class="ui-corner-top" data-role="header">
<h1>Delete Transaction</h1>
</div>
<div class="ui-corner-bottom ui-content" data-role="content" >
<h3 class="ui-title">Are you sure you want to delete these transactions?</h3>
<p>This action cannot be undone!</p>
<div class="ui-grid-a point6em" style="margin-top:10px;">
<div class="ui-block-a">
<a id="btnDoDeleteTransactions" data-role="button" data-mini="true">Delete</a>
</div>
<div class="ui-block-b point6em">
<a data-role="button" data-rel="back" data-mini="true">Cancel</a>
</div>
</div>
</div>
</div>
fiddle for v1.4.0.RC.1 above
I'm developing a mobile app using PhoneGap & jQuery Mobile. I'd like to keep my view files DRY. How do I achieve this in jQuery Mobile? Should I just put every page element in one HTML file?
Exactly, jQuery mobile is designed for that and I is the best approach to be followed.
you can have something like that:
<html>
<head>
<script src="jquerymobilelibrary.js"/>
</head>
<body>
<div data-role="page" id="page1">
<div data-theme="a" data-role="header"><h3>Header</h3></div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="textinput2">Title</label>
<input name="" id="textinput2" placeholder="" value="" type="text">
</div>
<a data-role="button" href="#page2">Button</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-theme="a" data-role="header"><h3>Header</h3></div>
<div data-role="content">
<!-- Content is empty -->
</div>
</div>
</body>
</html>
To switch between pages programmatically in JS you can use
<script>
$.mobile.changePage('#page2')
</script>
In jquery mobile site there is a simple but cool drag-and-drop UI builder to explore what the JQM library can do.
Hope it helps!
I am currently trying to build a Facebook-styled web App using jQuery mobile. My main problem is that users are not able to scroll both navigation-bar and content at the same time. I tried many css based solutions but whereas my normal browser displays everything correct all my mobile devices refuse to display two scroll bars at the same time.
So I tried to implement iScroll with iScrollview. It works just perfectly with every content but with my slideable menu-bar. I have no idea where the problem might be. As soon as a page is added iScrollview seems to ignore the data-iscroll attribute.
<body class="ui-mobile-viewport">
<div id="menu" data-role="content" data-iscroll> <!--Menu-->
<div id="memberDetails">
<h3>Username</h3>
</div>
<ul>
<li class="menuDivider" >MENUDIVIDER</li>
<li class="active"><span class="icon" id="home"></span><span class="text">Home</span></li>
<li></span><span class="text">Page One</span></li>
<li></span><span class="text">Page Two</span></li>
<li></span><span class="text">Page Three</span></li>
<li></span><span class="text">Page Eight</span></li>
<li class="menuDivider" >MENUDIVIDER</li>
</ul>
</div>
<!--/Menu-->
<!--page Home-->
<div data-role="page" class="pages ui-page ui-body-c ui-page-active" id="home" data-url="home" tabindex="0" style="margin-left: 0px; min-height: 882px; ">
<div data-role="header" class="ui-header ui-bar-a" role="banner"> <span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">Menu</span></span>
<h1 class="ui-title" tabindex="0" role="heading" aria-level="1">Home</h1>
</div>
<!-- /header -->
<div id="logo"><img src="files/images/wig_logo.png" alt="wig-logo" width="54" height="25"></div>
<!-- /logo -->
<div data-role="content" class="ui-content" role="main">
<p>Text</p>
</div>
<!-- /content -->
</div>
<!-- /page Home-->
</body>
I am using jQuery 1.8.2, JQM 1.2.0. The slideeffect is done by basically setting the content's margin to the menu's width. Let me know if you need any further information.
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>