I want two scrollable div side by side, but the following html is generating scrollbar for first div only with class "ui-block-a".
<div class="ui-grid-b" style="height:100%;margin-bottom:40px;">
<div data-iscroll="" data-role="content" class="ui-block-a" style="padding-left:40px; padding-right:40px;width:29.95%; max-height:900px;">
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed="false">
<h3>Heading 1st Div</h3>
Data in 1st Div
</div>
</div>
<div data-iscroll='{"resizeWrapper" : false}' class="ui-block-b" style="width:68%; padding-left:4%; padding-right:2%; max-height:900px;">
<div data-role="collapsible" data-theme="a" data-content-theme="a" data-collapsed="false">
<h3>Heading 2nd Div</h3>
Data in 2nd Div
</div>
</div>
</div>
Related
How to collapse all the nested collapsible-set and collapsible elements in nested collapsible set in Jquery Mobile?
Below is the code in the JSFiddle:
http://jsfiddle.net/ycP8y/
<body>
<div data-role="content">
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
<div data-role="collapsible-set">
<div data-role="collapsible">
<h1>
<div class="ui-btn-up-c ui-btn-corner-all custom-count-pos">47</div>
Test</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Assuming you are using jQM 1.2 as in your fiddle, you can just call trigger("collapse") on all collapsibles (http://demos.jquerymobile.com/1.2.1/docs/content/content-collapsible-methods.html ):
$(document).on("pageinit", function(){
$("#btnCollapse").on("click", function(){
$("[data-role=collapsible]").trigger("collapse");
});
});
Updated FIDDLE
I have an accordion in jquery mobile that is being populated through json data. In order to keep the styling, I call $( ".folders" ).collapsibleset.( "refresh" ); after all the data has been appended and it works, but only for the main folders. In my code I have made subfolders and those do not receive the styling changes. Here is my folder code
<div class="folders" data-role="collapsible-set" data-corners="false" data-theme="c" data-content-theme="d">
<div data-role="collapsible">
<h3>Main Folder</h3>
<div data-role="collapsible">
<h3>Sub Folder</h3>
<p>
Subtext
</p>
</div>
<div data-role="collapsible">
<h3>Folder</h3>
<p>Text</p>
</div>
<div data-role="collapsible">
<h3>Folder</h3>
<p>Text</p>
</div>
</div>
</div>
This code is not producing a Previous button:
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous">
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Actually to get the data-add-back-btn="true" work in latest version of jQuery Mobile 1.4, it should be at the header of the second page.
<div data-role="page" id="2ndPage">
<div data-role="header" data-add-back-btn="true" data-back-btn-text="Previous!">
<h1>HEADER</h1>
</div>
<div data-role="content">
hi
</div>
<div data-role="footer">
<p>FOOTER</p>
</div>
</div>
jQuery Mobile >= 1.4: https://stackoverflow.com/a/20065246/1771795
Adding data-add-btn-back to single page won't generate a button as there is no page before it in DOM nor in navigation history.
If you make two pages, it will appear on the next page.
<!-- page -->
<div data-role="page">
<div data-role="header">
<h1>My Header</h1>
</div>
<a href='#p1'>page 2</a>
</div>
<!-- another page -->
<div data-role="page" data-add-back-btn="true" data-back-btn-text="Previous" id='p1'>
<div data-role="header">
<h1>My Header</h1>
</div>
</div>
Demo: http://jsfiddle.net/uJz3E/1/
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
When creating a jQuery Mobile Accordion, how do I get a section of the accordion to open when a button is clicked?
When the user clicks the search button, I want to load the results into a list in the second panel, collapse the first and expand the second.
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
Search
</div>
<div id="resultsContainer" data-role="collapsible">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
Live Example:
http://jsfiddle.net/h2pPz/19/
HTML:
<div data-role="page" id="home" class="type-home">
<div data-role="content">
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
<!-- Either button syntax works -->
<!-- Search -->
<input type="button" value="Search" id="search"/>
</div>
<div id="resultsContainer" data-role="collapsible" data-collapsed="true">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
</div>
</div>
JS:
$('#search').click(function() {
$('#resultsContainer').trigger('expand');
});