I have the following popup.
<div data-role="popup" id="popup-settings" data-transition="slideup" data-theme="c" data-corners="true" data-shadow="true" style="width: 500px; border: 1px solid #A5A5A5;">
<div data-role="header" class="ui-corner-top" style="border-bottom: 1px solid #A5A5A5;">
<h1>Settings</h1>
Done
</div>
<div data-role="content" style="background-color: #f2f2f2; border: 1px solid #f2f2f2;">
<ul data-role="listview" data-inset="true">
<li style="background-color: #f2f2f2">
<img src="icons/settingsMapping.png" /><h2>Mapping</h2><p>Set mapping framework to use.</p>
<ul>
<li><h2>Slappy</h2></li>
<li><h2>Tappy</h2></li>
</ul>
</li>
<li><img src="icons/settingsConnect.png" /><h2>Connection</h2><p>Connect to your Storm V4.0+ Server.</p></li>
<li><img src="icons/settingsPasscode.png" /><h2>Passcode</h2><p>Enter your user name and password.</p></li>
<li><img src="icons/settingsDeveloper.png" /><h2>Developer</h2><p>Developer settings.</p></li>
</ul>
</div>
</div>
When it displays, the nested ul is visible all the time.
What I'm looking at doing is when you select a list item from the first list, it's replaced by a second list, all within a popup.
Is this even possible?
Related
So, I'm adding a popup menu off the header and it works... works quite well actually except for one small thing. For the life of me I can't get it to display the icons the way I want them!
In the first <li> I brute force the data-icon into the <li> and it shows but its not positioned to the left. In the others, I left the data-icon where I'm accustomed to leaving them (where they work correctly everywhere else) and they don't display at all.
Any suggestions?
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li data-icon="gear" data-iconpos="left">Settings</li>
<li>GPS</li>
<li>About</li>
</ul>
</div>
</div>
<!-- /header -->
JSFiddle
The data-iconpos attribute not defined for regular list items, works only when the < li> item is inside a navbar widget: http://www.w3schools.com/jquerymobile/jquerymobile_ref_data.asp
Please, take a look to the fiddle I made: https://jsfiddle.net/xbo8npng/1/
I have placed the icons to the left using css:
<div id="header" data-role="header" data-theme="b">
<h1>MyApp</h1>
Menu
<div data-role="popup" id="popupMenu" data-theme="b">
<ul data-role="listview" data-inset="true">
<li class="left" data-icon="gear">Settings</li>
<li class="left">GPS</li>
<li class="left">About</li>
</ul>
</div>
</div>
and the styles:
.left a{
padding-left: 2.5em !important;
padding-right: 1em !important;
}
.left a:after{
left: 2px;
right: auto;
}
I hope this helps you!
Seems I can't put the icon correctly, can someone help me out?
JQuery Mobile version: 1.4.2
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>List With Thumbnails and Text</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="chrome.png">
<h2>Google Chrome</h2>
<p><img class='ui-icon-home ui-btn-icon-notext ui-btn-icon-left'/> Google Chrome is a free, open-source web browser. Released in 2008.</p>
</a>
</li>
<li>
<a href="#">
<img src="firefox.png">
<h2>Mozilla Firefox</h2>
<p>Firefox is a web browser from Mozilla. Released in 2004.</p>
</a>
</li>
</ul>
</div>
</div>
Result:
I try to use this but doesn't work.
<span><i class='ui-icon-home ui-btn-icon-notext ui-btn-icon-left'>Text</i></span>
If you want the icon inline with the text and not a button, you can accomplish it like this.
First add a span for the icon with class="ui-icon-home ui-btn-icon-notext inlineIcon":
<p>
<span class="ui-icon-home ui-btn-icon-notext inlineIcon"></span>
Google Chrome is a free, open-source web browser. Released in 2008.
</p>
Then we add the folowing CSS:
li p {
line-height: 24px;
}
.inlineIcon {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
The P line-height makes room vertically for the icon, while the inlineIcon class places the icon correctly.
If you do not want the gray disk and would prefer a plain black version of the icon, you would add the ui-alt-icon class to the span to make it black, and the CSS would be:
.inlineIconNoDisk {
display: inline-block;
position: relative;
vertical-align: middle;
margin-right: 6px;
}
.inlineIconNoDisk:after {
background-color: transparent;
}
Here is a DEMO
And a screenshot:
Try this code it will work
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<div data-role="page" id="pageone">
<div data-role="main" class="ui-content">
<h2>List With Thumbnails and Text</h2>
<ul data-role="listview" data-inset="true">
<li>
<a href="#">
<img src="chrome.png"/>
<h2>Google Chrome</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="width:30%;"><button data-icon='home' data-iconpos="notext"></button></div>
<div class="ui-block-b" style="width:70%;"> <p>Google Chrome is a free, open-source web browser. Released in 2008.</p></div></div>
</a>
</li>
<li>
<a href="#">
<img src="firefox.png"/>
<h2>Mozilla Firefox</h2>
<div class="ui-grid-a">
<div class="ui-block-a" style="width:30%"><button data-icon='home' data-iconpos="notext"></button></div>
<div class="ui-block-b" style="width:70%;padding-bottom:5%;"> <p>Firefox is a web browser from Mozilla. Released in 2004.</p></div>
</div>
</a>
</li>
</ul>
</div>
</div>
Refer this Fiddle Demo
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.
I have the following to display a list of items and a button underneath the list. However the button is overlapping on top of the list. I must be not putting some kind of data-role or another one of their attributes on it.
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" >
<li class="hidden"> _sheetName</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
Here is what it looks like:
Live Example:
http://jsfiddle.net/B7nhA/ (the problem)
http://jsfiddle.net/B7nhA/1/ (the fix)
You're missing one of the attributes for the listview
data-inset="true"
HTML
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" data-inset="true">
<li class="hidden">Link 1</li>
<li class="hidden">Link 2</li>
<li class="hidden">Link 3</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
i experienced the same problem. Here is my fix.
<style>
.ui-content .ui-listview
{
margin-top: 5px;
margin-bottom: 5px;
}
</style>
JsFiddle Demo
You dont need to modify your markups.
How about inserting an line break befor the button.Not a clean solution I think.But it will work.
<div data-role="content" data-theme="b">
<div>
<ul id="listOfSheets" data-role="listview" >
<li class="hidden"> _sheetName</li>
</ul>
</div>
<br>
<input id="logout" type="button" value="Sign Out" />
</div><!-- /content -->
I used padding to solve this kind of problems. See below I added padding to the list-container div.
<div data-role="content" data-theme="b">
<div style="padding-bottom:20px">
<ul id="listOfSheets" data-role="listview" >
<li class="hidden">Link 1</li>
<li class="hidden">Link 2</li>
<li class="hidden">Link 3</li>
</ul>
</div>
<input id="logout" type="button" value="Sign Out" />
Here is a DEMO