How to create a nested UI-Bootstrap accordion where inner and outer accordions works independent of each other.
If one accordion group is open in outer accordion and I am doing something in inner accordion, it shouldn't affect the state of outer accordion. Below is the sample code for what I want to achieve.
(What is happening right now is, if I open a group in inner accordion,
it is closing the parent outer accordion group)
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
Below iss the inner accordion
<uib-accordion close-others="oneAtATime">
<uib-accordion-group heading="Static Header, inner accordion" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Header inner accordion 1t">
<p>The body of the uib-accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</uib-accordion-group>
</uib-accordion>
</uib-accordion-group>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups1">
{{group.content}}
</uib-accordion-group>
</uib-accordion>
I have created a plunker here
Both you accordions share a model in is-open="status.isFirstOpen" (line 41 & 44 in your plunk), that means when that value changes, both accordions will have their drawers opened and closed at the same time
Change the inner accordion's is-open to some other model value like is-open="inner_status.isFirstOpen.
And just to be sure, make sure all accordions use different values for their properties, that will keep them properly decoupled.
Related
I have two dynamic horizontal control groups of radio buttons:
<div class="categories-panel" id="sections-panel">
<fieldset id="section-choice-fieldset" data-role="controlgroup" data-type="horizontal">
<!-- ko foreach: Sections -->
<input type="radio"
data-mini="true"
...
/>
<label data-bind="text:Name, attr:{'for':Id}"></label>
<!-- /ko -->
</fieldset>
</div>
The content of controlgroups is updated by knockoutjs. The markup is updated this way:
self.refreshCategoriesList = function() {
$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
$("#category-choice-fieldset").controlgroup();
};
The problem is: the controlgroups don't fit in one row until I turn of and turn on the display: inline-block property of .ui-controlgroup-controls div in debugger:
before display: inline-block refresh:
http://i890.photobucket.com/albums/ac105/cubius/screen-1.png
after display: inline-block refresh (desired view):
http://i890.photobucket.com/albums/ac105/cubius/screen-2.jpg
How to make jQM always paint my controlgroups in one row?
First of all, the way you select your control group is wrong in this line :
$("#category-choice-fieldset").controlgroup();
Mustnt it be
$("#section-choice-fieldset").controlgroup();
(Maybe a typo)
You could do this in any of the two ways :
Method 1
Works fine in my fiddle. I'd say you move the <script> tag from head to body because page events of jQM dont play well with KnockOut.js and KnockOut.js needs a DOM ready to work properly, AND DOM ready doesnt work well with jQM. So I guess its a vicious loop indeed.
Demo : http://jsfiddle.net/hungerpain/k7UR5/
Method 2
And you could try one more thing in your refreshCategoriesList method:
//$("#section-choice-fieldset").find("input[type='radio']").checkboxradio();
//$("#category-choice-fieldset").controlgroup();
$("[data-role=page]").trigger("create");
Refreshing the entire controls on the page - thats what trigger("create") does
Demo : http://jsfiddle.net/hungerpain/k7UR5/1/
If you are updating the control group (appending, modifying etc) , access the control group like this:
$("#my-controlgroup").controlgroup("container")["append"]($el);
You need to access the control group container. See my jsfiddle for modifying the control group:
http://jsfiddle.net/androdify/WAzs6/
I have a sortable in which two consecutive elements may be "attached" to each other. When the attach action is performed, I wrap the two "field" elements in a "field-group-container" div in hopes that I would be able to drag both inner "field" elements as a unit.
Oddly enough, this approach works perfectly if I initiate the dragging from the field-group-container's first child (of two children), however, if I initiate the dragging from the second child, the field gets pulled out of the field-group-container. I would like the two field elements to move together regardless of which element is clicked to initiate dragging.
I tried making the "items" sortable option more specific to only allow dragging field-group-containers and fields that are not children of a field-group-container but it looks like the click event is cancelled before it bubbles up to the field-group-container.
In order to find out whether this is an issue with the sortable or my implementation of it, I created a boiled down version to see if I could replicate my issue.
<div id="sortable">
<div class="field">A</div>
<div class="field">B</div>
<div class="field-group-container">
<div class="field">C</div>
<div class="field">D</div>
</div>
<div class="field">E</div>
<div class="field">F</div>
<div class="field">G</div>
</div>
http://jsfiddle.net/prsGz/
It works exactly as expected!
This contradicts the behavior I'm observing in my project. In my real
implementation the "field" elements have several inner elements such
as labels, buttons, etc.
My question
Does anyone know what would be causing this behavior?
What could be causing my two field elements to not move as a unit
even though they are both wrapped in a parent container?
I'm suing jquery ui draggable on a list of items that can be dropped on a .droppable list of other items. Here's a jsFiddle to show what I'm trying to do:
<div id="container">
<div id="left-pane" class="pane">
<div class="item">Item A</div>
<div class="item">Item B</div>
<div class="item">Item C</div>
<div class="item">Item D</div>
</div>
<div id="right-pane" class="pane">
<div class="item">Item E</div>
<div class="item">Item F</div>
<div class="item">Item G</div>
<div class="item">Item H</div>
</div>
$('.item').draggable({
helper: 'clone',
appendTo: '#contentpane',
cursor: 'move'
});
$('.item').droppable();
The panes have a fixed height, and overflow-y: auto so that we can scroll inside to see hidden elements.
When dragging an element from a list to the other, the lists do not scroll since I use appendTo and the dragged item is not in the list. Is there a way to make the list 'scrollable' when I drag an item over? otherwise it is not possible to drop the item at the bottom of the list, let's say drop 'Item A' on 'Item H' on the fiddle example
Be able to use the scroll features from different container is really not easy to do.
I opended a topic on this subject. You will find an edit of the question with a functionnal workaround.
Check this related question : JqueryUI, drag elements into cells of a scrolling dropable div containing large table
About your last remark, you could place your item at the boom of the list using the sortable property. http://jqueryui.com/sortable/
Well the only way I found to do it is to detect the position of the dragged element and scroll the droppable container, with a smooth effect so that it will scroll like doing it from the mouse wheel.
Dynamically injecting buttons into JQM footers seems to be an exercise in frustration. Anyone have a clue how to apply proper formatting for this? Here are several anomalies I found trying to do this:
Multi-column button grids are not properly formatted in the footer
data-corners="false" attribute (to get flush buttons) does not apply to the first and last buttons in the footer
With data-role="controlgroup" data-type="horizontal" for the footer buttons, if there are too many buttons to fit in one row the styling looks weird (since some buttons will have rounded corners, others will not)
If data-role="controlgroup" data-type="horizontal" are omitted for the footer buttons, buttons may be rendered partially off the screen...
In general - argh!!!! Anyone have any success dynamically injecting buttons into a footer? If so, would much appreciate to hear how this was achieved.
Thanks!
Would something like this work:
http://jsfiddle.net/eznh8/7/
JS
$('#addButtonName').click(function() {
var theFooter = $('#addMoreButtons');
var buttonName= $('#newButtonName');
if(buttonName.val() != '') {
theFooter.append(''+buttonName.val()+'');
buttonName.val('');
$('#theHomePage').trigger('create');
}
});
HTML
<div data-role="page" id="theHomePage">
<label for="basic">Button Name:</label>
<input type="text" name="newButtonName" id="newButtonName" value="" />
Add New button
<div data-role="footer" class="ui-bar" id="addMoreButtons">
</div>
</div>
Multi-column button grids are not properly formatted in the footer - this is my response to that.
One thing to check if you are using controlgroup with a href links - make sure your each of the links in the control group has the following CSS;
vertical-align:top;
You will also have to get more control over how the elements look if you are styling them as buttons. I posted a similar discussion over here:
https://forum.jquery.com/topic/jquery-mobile-horizontal-control-groups-creating-a-custom-split-list
https://forum.jquery.com/topic/css-code-to-help-control-entire-button-in-a-jquery-mobile-theme
Hope that helps.
I'm using jQuery UI's tabs to divide content on my page. I have a 'link bar' I would like to have hang at the bottom of each tab. (The tab text will change but generally they will navigate the user left or right through tabs.)
Hosting the #linkBar div inside the first tab makes it 'look' right, inside Themeroller's border. Putting it just outside the 'parent tab' div places the links below the theme's border. I've tried creating a spacer div but it just pushes #linkBar down further.
Of course when the user switches to another tab, the link bar goes away. How is ownership of elements organized between tabs? Should I dynamically destroy the #linkBar div on the tab being navigated away from and rebuild it in the tab being navigated to? Or is there a better way to move it between them, or just manage visibility?
I would like to have the link bar follow the content on each tab as a footer, 'floating' one or two lines below the last content of each tab (rather than having it in a fixed position relative to the tab bar).
Ok ... It was simply adding the jQuery UI classes to the linkBar. Check out my working jsFiddle demo:
I moved the linkBar div out of the tabOne div and put it at the bottom of the tabs div:
<div id="container">
<div id="title">
<h1>title bar</h1>
</div>
<div id="tabs">
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tabone">
content goes here
<br><br><br><br>more stuff<br><br><br>more stuff<br><br>
</div>
<div id="tabtwo">
content goes here...
</div>
<div id="tabthree">
content goes here...
</div>
<div id="linkBar">
<span id="leftLink"><< left link</span>
<span id="rightLink">right link >></span>
</div>
</div>
</div>
I slightly altered the linkBar style by giving it a top and bottom margin as well as hiding it by default:
#linkBar {
display: none;
margin: 10px auto;
}
Then I simply added the jQuery UI classes to the $linkBar. I slightly altered the jQuery to be more readable:
$("#accordion").accordion({ header: "h3" });
var $tabs = $("#tabs"),
$linkBar = $("#linkBar");
$linkBar.addClass("ui-tabs-panel ui-widget-content ui-corner-bottom");
$linkBar.show();
$tabs.tabs();
$('#title').click(function() {
$tabs.tabs('select', 0);
return false;
});
Note: You could just add class="ui-tabs-panel ui-widget-content ui-corner-bottom" to the linkBar div and be done with it. But, I think I like it better managed in the JS.