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.
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!
I am able to insert an image inside the header of the jQuery mobile data role, but when I change my browser size the jpg does not change with it. Can someone tell me a quick fix for this please?
Here is my code
<div data-role="page">
<div data-role="header" class="page_header" >
<img src="header_bg.jpg" >
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>Products</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</div><!-- /content -->
</div><!-- /page -->
If you just want to fill the background of the header with your image, try this:
<div data-role="header" class="page_header" >
<h1>Header</h1>
</div>
Use CSS for your page_header class to set the background image sized by percentage:
.page_header {
background-image: url("http://lorempixel.com/1400/50/abstract/");
background-repeat:no-repeat;
background-size: 100% 100%;
}
Here is a DEMO
If you really want to use an image tag like in your example, set the width of the image to 100%:
.page_header img {
width: 100%;
}
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/
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>