I am using the jQuery UI sortable function on my page to sort a list of div, witch works fine. My problem is that when i start dragging a div or after I sort one or more divs, it breaks my design. Is there any way to prevent or fix this design issue when using jQuery UI sortable?
<div class="gentbl">
<div class="genrw">
<div class="rwttl">Title</div>
<div class="rwelm">Element</div>
</div>
<div class="genrw">
<div class="rwttl">Title</div>
<div class="rwelm">Element</div>
</div>
<div class="genrw">
<div class="rwttl">Title</div>
<div class="rwelm">Element</div>
</div>
<div class="genrw">
<div class="rwttl">Title</div>
<div class="rwelm">Element</div>
</div>
</div>
$(function(){
$('.gentbl').sortable({
revert: true
});
$('.gentbl').disableSelection();
});
Working example: HERE
Related
I need to Bind Array Items to UI.
back in Days i used bootstrap and now looking to use Angular Material.
In bootstrap and angular Binding the code as follows
<div class="row">
<div ng-repeat="product in products">
<div class="col-sm-4">
<h2>{{product.title}}</h2>
</div>
</div>
how to do the simalar grid binding using Angular Material. I tried below
<div layout="column">
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Resulting all items in rows. But i need the display to be similar to bootstrap view, showing items next to each other and in next rows
You will have to add "layout-wrap" attribute to your row.
<div layout="row" layout-wrap>
<div ng-repeat="item in todos">
<md-card>
<md-card-content>
<p>item.title</p>
</md-card-content>
</md-card>
</div>
</div>
Read more about layout options here
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 am trying trying to create a nested accordion out of twitter-bootstrap panels. But the problem is, both the parent and child accordions are being affected (collapsed/opened) together when I click on either one. Is something wrong with my header selector?
my html:
<div class="panel panel-default">
<div class="panel-heading">Outer Panel</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">Inner Panel</div>
<div class="panel-body"></div>
</div>
</div>
</div>
JS:
$(".panel").accordion({header:'.panel-heading',collapsible:true});
It turns out the header option would need to be >.panel-heading to affect only the current level.
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>
I have given up doing this in pure js. And I can't find the jquery accordian stuff i was looking over when I started this project originally. What is the best way to do this? My code is linked here
Here is jQuery UI Accordion.
All you need is:
<div id="accordion">
<h3>Section 1</h3>
<div>
<p>
Paragraph 1
</p>
</div>
<h3>Section 2</h3>
<div>
<p>
Paragraph 2
</p>
</div>
</div>
and
$(document).ready(function() {
$("#accordion").accordion();
});