What would be the best way to do the list as in the image. When I tried doing as in the code text gets squashed into the image.
<div data-role="page" id="wrapper">
<div data-role="content">
<div class="stacked-list">
<img src="images/icon_s1.jpg" alt="Online Subscription" class="ui-li-thumb"/>
<div class="para">
<h3 class="ui-li-heading">Online Subscription</h3>
<p class="ui-li-desc">Online access to complete company profiles plus tools & analysis</p>
</p>
</div>
</div>
</div>
</div> <!-- /page -->
Image of End Result http://move.clanteam.com/images/stacked-list_08.jpg
Try list items with thumbnails?
Docs:
http://jquerymobile.com/demos/1.0a4.1/#docs/lists/lists-thumbnails.html
http://jquerymobile.com/demos/1.0a4.1/docs/lists/lists-readonly.html
Related
My images wont stay on the same row once i put the <p> in, they both sit in there own row, not sure what im doing wrong here
<div class="container">
<div class="row">
<div class="image-fluid text-center">
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
I think whatever CSS you used in class="row" is not acting the way you expect, because that div has a single child.
I don't know what's in your css file, but the following HTML works as I expect you want:
<div class="container">
<div class="image-fluid text-center" style="display:flex">
<div>
<img class="bruno" src="resourcesnew/css/Img/bruno.jpg">
<p class="h6">Bruno</p>
</div>
<div>
<img class="anth" src="resourcesnew/css/Img/anth.jpg">
<p class="h6">Anthony</p>
</div>
</div>
</div>
Each image/text pair gets its own div, and what used to be your row div now has multiple children.
Hi please look at this,
<div class="row">
<div class="col-lg-5"></div>
<div class="col-lg-15">
<div class="row">
<div class="col-lg-**2/3**"></div>
<div class="col-lg-**1/3**"></div>
</div>
</div>
How Can I do it without separator?
I would like to do something like that:
<div class="row">
<div class="col-lg-10"></div>
<div class="col-lg-5"></div>
</div>
This is Grid - 20 columns, 5 column sidebar 15 rest.
Bootstrap is based on a 12 column grid. If you want a column to be 2/3's of a page with a sidebar 1/3 I would do the following.
<div class="container>
<div class="row">
<div class="col-sm-8">
<p> This content is 2/3 of the page</p>
</div><!-- col-sm-8 -->
<div class="col-sm-4 -->
<p>This content is 1/3 of the page</p>
</div><!-- col-sm-4 -->
</div><!-- row -->
</div><!-- container -->
If you are wanting it to be responsive I would start with defining the smaller screen size "col-sm-?" and large screens will inherit this.
Otherwise, I'm not sure what you are trying to achieve and what you mean by separator. Could you clarify?
Hope this helps.
Ex. Code below is represented as Blue Box, I want to expand 2 grid to Yellow one. But, the problem is; This .. need to be inside content but it always have margin left and right. I don't know how to solve this.
<div data-role="content" data-theme="d" >
<div class="ui-grid-a" >
<div class="ui-block-a"><strong>Time:</strong></div>
<div class="ui-block-b" id="price-order-timestamp">yyyy-mm-dd hh24:mi:ss</div>
</div>
<div style="width:100%;"> <!-- Here-->
<div class="ui-grid-d" id="data-table-header" >
<div class="ui-block-a">Label A</div>
<div class="ui-block-b">Label B</div>
<div class="ui-block-c">Label C</div>
<div class="ui-block-d">Label D</div>
<div class="ui-block-e">Label E</div>
</div>
<div class="ui-grid-d" id="data-table" >
<div class="ui-block-a">A</div>
<div class="ui-block-b">B</div>
<div class="ui-block-c">C</div>
<div class="ui-block-d">D</div>
<div class="ui-block-e">E</div>
</div>
</div>
</div>
If you want to remove the default padding added to the data-role=content tag, add the following override in your custom.css
#myPageId .ui-content{
padding-left:0;
padding-right:0;
}
http://jsfiddle.net/nirmaljpatel/LW5aC/
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
I am using Dreamweaver CS6 and I have attached the code below. I updated all of the jquery files to the latest releases. When I go in to live view I can click on both of the first two buttons but the third button will not work on either page and it does not have a clean edge on the right. Is there something wrong with the css or the code itself. Thanks
<!--Safety Home Page Starts Here -->
<div data-role="page" id="safety_home" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topics</li>
<li>Report</li>
</ul></div>
</div>
<div data-role="content" data-theme="c">
<p>Home</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
</div>
<!--Safety Home Page Ends Here -->
<!--Safety Topic Page Starts Here -->
<div data-role="page" id="safety_topic" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topic</li>
<li>Report</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Topics Page Ends Here -->
<!--Safety Incidents Page Starts Here -->
<div data-role="page" id="safety_report" data-theme="c">
<div data-role="header" data-theme="c">
<h1>GGM Mobile</h1>
<div data-role="navbar" data-theme="c"><ul>
<li>Home</li>
<li>Topics</li>
<li>Report</li>
</ul>
</div>
</div>
<div data-role="content" data-theme="c">
<p>Topics</p>
</div>
<div data-role="footer" data-theme="c">
<h4>Gothic Grounds Management, Inc. © 2012</h4>
</div>
<!--Safety Incident Page Ends Here -->
Yeah your second and third page has no closing </div> tag. You may want to try and use validators to help spot issues like this. Here is the type of thing that you see when you run your code through a validator.
Line 38, Column 56: Unclosed element div.
<div data-role="page" id="safety_report" data-theme="c">
Line 20, Column 55: Unclosed element div.
<div data-role="page" id="safety_topic" data-theme="c">
HTML5 Validators
http://validator.w3.org/
http://html5.validator.nu/
I hope this helps.
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