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!
Related
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?
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'm using:
jquery-1.8.2 and jquery-mobile-1.2.0 (generated with all options checked)
Targeted devices are iPhone 4/4s/5 and iPad.
The current data-role="listview":
Test link
The current code:
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Test</h1>
</div>
<div data-role="content">
<div class="content-primary">
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="index.html">
<img src="pics/paul_jones.jpg" />
<h3>First Element</h3>
<p>First</p>
</a></a>Test
</li>
<li><a href="index.html">
<img src="pics/ray_moore.jpg" />
<h3>Second Element</h3>
<p>Second</p>
</a>Test
</li>
<li><a href="index.html">
<img src="pics/lisa_wong.jpg" />
<h3>Third Element</h3>
<p>Third</p>
</a>Test
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
</pre>
What is the best way to make each item auto-adjust its height to stretch to full screen vertically (I see that the framework handles very well horizontal stretching), so that each row is 33% of the screen in this case, and have the images resize accordingly? Obviously this would have to work when there are four or more items.
In my site main page I would instead like to have three or four "image buttons" that I styled this way.
<b>#button_id .ui-btn-inner</b>
background: url("../img/button_image.png") no-repeat rgba(0, 0, 0, 0.4);
background-size: 100% 100%;
fill the screen vertically autoresizing themselves.