Jquery Mobile 2 ListView inside Tab issue - jquery-mobile

I am having issues or i should say the whole list breaks if i use the following code
<div data-role="content" class="ui-content-menu">
<div data-role="tabs">
<div id="one" class="tablist-content">
<h1>APPETIZER</h1>
<ul data-role="listview">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
</ul>
</div>
<div id="two" class="tablist-content">
<h1>Second tab contents</h1>
</div>
<div id="three" class="tablist-content">
<h1>third tab contents</h1>
</div>
<div id="four" class="tablist-content">
<h1>First tab contents</h1>
</div>
<div id="five" class="tablist-content">
<h1>Second tab contents</h1>
</div>
<div id="six" class="tablist-content">
<h1>third tab contents</h1>
</div>
<div id="seven" class="tablist-content">
<h1>First tab contents</h1>
</div>
<div id="eight" class="tablist-content">
<h1>Second tab contents</h1>
</div>
<ul data-role="listview" class="tablist-right" data-icon="false">
<li><div><img alt="Appetizers" src="images/Icons/Ic_Appetizer_54.png"/><h3 class="cat-heading">APPETIZER</h3></div></li>
<li><div><img alt="Main Course" src="images/Icons/Ic_MainCourse_54.png"/><h2 class="cat-heading">MAIN</h2></div></li>
<li><div><img alt="Sides" src="images/Icons/Ic_Sides_54.png"/><h2 class="cat-heading">SIDES</h2></div></li>
<li><div><img alt="Dessert" src="images/Icons/Ic_Desserts_54.png"/><h2 class="cat-heading">DESSERT</h2></div></li>
<li><div><img alt="Set Meals" src="images/Icons/Ic_SetMeals_54.png"/><h2 class="cat-heading">SET MEALS</h2></div></li>
<li><div><img alt="Drinks" src="images/Icons/Ic_Drinks_54.png"/><h2 class="cat-heading">DRINKS</h2></div></li>
<li><div><img alt="Alcohol" src="images/Icons/Ic_Alcohol_54.png"/><h2 class="cat-heading">ALCOHOL</h2></div></li>
<li><div><img alt="Coffee" src="images/Icons/Ic_Coffee_54.png"/><h2 class="cat-heading">COFFEE</h2></div></li>
</ul>
</div>
</div>
What i currently want to achive is a list inside tab- that tab is itself buit using data-role="list-view" as you can see. if i remove list code from the appetizer section it works great.
Thank in advance for any help.


The problem may be in the ordering of the segments. I don't know why is it behaving like this, but putting tab segment in the end works. http://jsfiddle.net/toct7x0u/1/
<div data-role="content" class="ui-content-menu">
<div data-role="tabs" id="my_tabs">
<ul data-role="listview" class="tablist-right" data-icon="false" id="listss">
<li><div><img alt="Appetizers" src="images/Icons/Ic_Appetizer_54.png"/><h3 class="cat-heading">APPETIZER</h3></div></li>
<li><div><img alt="Main Course" src="images/Icons/Ic_MainCourse_54.png"/><h2 class="cat-heading">MAIN</h2></div></li>
<li><div><img alt="Sides" src="images/Icons/Ic_Sides_54.png"/><h2 class="cat-heading">SIDES</h2></div></li>
<li><div><img alt="Dessert" src="images/Icons/Ic_Desserts_54.png"/><h2 class="cat-heading">DESSERT</h2></div></li>
<li><div><img alt="Set Meals" src="images/Icons/Ic_SetMeals_54.png"/><h2 class="cat-heading">SET MEALS</h2></div></li>
<li><div><img alt="Drinks" src="images/Icons/Ic_Drinks_54.png"/><h2 class="cat-heading">DRINKS</h2></div></li>
<li><div><img alt="Alcohol" src="images/Icons/Ic_Alcohol_54.png"/><h2 class="cat-heading">ALCOHOL</h2></div></li>
<li><div><img alt="Coffee" src="images/Icons/Ic_Coffee_54.png"/><h2 class="cat-heading">COFFEE</h2></div></li>
</ul>
<div id="one" class="tablist-content">
<h1>APPETIZER</h1>
<ul data-role="listview" id="list" data-inset="true">
<li>Acura</li>
<li>Audi</li>
<li>BMW</li>
</ul>
</div>
<div id="two" class="tablist-content">
<h1>Second tab contents</h1>
</div>
<div id="three" class="tablist-content">
<h1>third tab contents</h1>
</div>
<div id="four" class="tablist-content">
<h1>First tab contents</h1>
</div>
<div id="five" class="tablist-content">
<h1>Second tab contents</h1>
</div>
<div id="six" class="tablist-content">
<h1>third tab contents</h1>
</div>
<div id="seven" class="tablist-content">
<h1>First tab contents</h1>
</div>
<div id="eight" class="tablist-content">
<h1>Second tab contents</h1>
</div>
</div>
</div>

Related

how to fit a navbar inside a dialog page jaquery mobile?

I have try to include a footer with a navbar inside a dialog page, however, the navbar gets bigger than the dialog window. I did try to just include the navbar without the data-role="footer" but is doing the same. Looks like the navbar inside the dialog doesn't inherent the css properties from the dialog parent. Here is the code.
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div role="dialog">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="">
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
anybody with sugestions??

It looks like the borders on the navbar buttons are not considered when setting width. You can fix it with a little CSS
<div id="addCourse" data-role="page" data-dialog="true" data-close-btn="none">
<div data-role="header" role="banner">
<h1>Add course</h1>
</div>
<div role="main" class="ui-content">
<div class="ui-field-contain">
<label for="add-course">New course</label>
<input type="text" name="add-course" id="add-course" placeholder="Enter new course" value="" />
</div>
</div>
<div data-role="navbar">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
</div>
.ui-dialog-contain .ui-navbar {
padding-right: 4px;
border-bottom-left-radius: 0.3125em;
border-bottom-right-radius: 0.3125em;
}
Working DEMO

I did found another way to work around this issue. I just added a overflow:hidden to the data-role="navbar"
<!-- Dialog Add Course Footer -->
<div data-role="navbar" style="overflow:hidden;">
<ul>
<li>Cancel</li>
<li>Save</li>
</ul>
</div>
<!-- End Dialog Add Course Footer -->

i need help getting ratchet push.js fade transition to work?

this is a basic example calling "two.html", with the fade transition
<div class="content">
<div class="medium-6 columns text-center top">
POSPAId
</div>
</div>
and this is two.html
<div class="content">
<div class="medium-6 columns text-center top">
<a href="index.html" data-transition="slide-out">
back
</a>
</div>
</div>

How to show panel with buttons in panel?

can you please tell me how to show panel with buttons in panel(with slide show) .and display different pages on each Button click?
here is my code.
http://jsfiddle.net/ravi1989/YAA4A/
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
</div>
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>

I hope I have understood your question correctly.
Working example: http://jsfiddle.net/TXRjk/1/
HTML:
<div data-role="page" id="index">
<div data-role="panel" id="mypanel">
Jump to second page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
Next
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="second">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to third page
</div>
<div data-theme="a" data-role="header">
<h3>
Second Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
<div data-role="page" id="third">
<div data-role="panel" id="mypanel">
Jump to first page
Jump to second page
</div>
<div data-theme="a" data-role="header">
<h3>
Third Page
</h3>
Back
</div>
<div data-role="content">
<a data-role="button" id="open-panel">Open Pannel</a>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
Javascript:
$(document).on('click', '#open-panel', function(){
$.mobile.activePage.find('#mypanel').panel("open");
});

Add a "Split button" in collapsible-set (JQuery Mobile)

Is there are any way to add the split button (that comes with ListView) to the collapsible; I have tried/tested the below code, but doesn't work!
<div data-role="collapsible-set" data-theme="a" data-content-theme="e" data-split-icon="gear" data-split-theme="e">
<div data-role="collapsible">
<h3> Breakfast </h3>
<p>
<a href="somthing.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
<div data-role="collapsible">
<h3> Lunch</h3>
<p>
<a href="somthingElse.html"> the contents comes here.
</a>
</p>
<a href="#purchase" data-rel="popup" data-position-to="window" data-transition="pop">
split button 2
</a>
</div>
</div>
Any Idea or any other solution (workaround) is highly welcome.

Well it needs a little work but here is what I have
Live Example:
http://jsfiddle.net/yPhJp/5/
http://jsfiddle.net/yPhJp/6/ ( Adding verbiage to the collapsible )
JS
$(".splitButtonClicked").on("click", function (event, ui) {
alert('Hello');
return false; // stop collapsible event
});
HTML
<div data-role="page" id="home">
<div data-role="content">
<div data-role="collapsible-set" data-theme="b" data-content-theme="d">
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Breakfast</h3>
</a>View Menu
</li>
</ul>
</h2>
</div>
<div data-role="collapsible">
<h2>
<ul data-role="listview" data-split-icon="gear" data-split-theme="d">
<li><a href="#">
<h3>Lunch</h3>
</a>View Menu
</li>
</ul>
</h2>
</div>
</div>
</div>
</div>
Hope this helps you

content space not set in bottom of the page in jQuery mobile?

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

Resources