I've created a demo in Plunker
, which I use angular-ui collaspe to work on bootstrap panel,
but it seems the ui animation not work well, when I click the title bar to collaspe, the panel-body will animate to its default padding 15px, then disappear immediately. And if I remove the padding of panel-body, the animation looks smoothly. So how can I remain the padding and fix the animation issue?
You should put your panel-body inside another tag with panel-collapse class, like this:
<div class="panel-collapse" collapse="collaspe1">
<div class="panel-body">
<div class="group-item" ng-repeat="group in recommendedGroups">
<span>{{group.name}}</span>
<button type="button" class="btn btn-danger btn-xs pull-right">Add</button>
</div>
</div>
</div>
See updated demo. I got this clue from markup for Accordion.
Related
I would like to have a modal window using uikit popup in my react application.
When I include this code in my public/index.html file the modal is showing correctly:
<a uk-toggle href="#my-id">Teste Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div class="uk-modal-dialog uk-modal-body">
<button class="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
But it will not work if I try to use it from inside a react component like this:
<a className="uk-toggle" href="#my-id">Test Modal bg-close:false</a>
<div id="my-id" uk-modal="bg-close: false">
<div className="uk-modal-dialog uk-modal-body">
<button className="uk-modal-close-default" type="button" uk-close></button>
<p>This modal can NOT be close by just clicking outside of it ...</p>
<p>Please click on the X at the top right to close it.</p>
</div>
</div>
I can see the link but the click doesn't have any effect.
Am I doing something wrong?
EDIT
I added a jsfiddle, and I confirm the react version is still not working...
https://jsfiddle.net/umfk8jnc/9/
You have to add a data- prefix. Here is an updated JSFiddle link: https://jsfiddle.net/pd8nt5mx/
NOTE React will work with data-uk-* prefixes only.
Source: https://getuikit.com/docs/javascript#component-usage
I'm trying to make use of wj-popup inside an ng-repeat in an AngularJS application, but am having difficulty.
Basically, I've used the demo example for wj-popup and wrapped it in an ng-repeat as follows. I have an array of posts, each has a property that is its indexValue (post.indexValue).
Each button needs to have a different ID, so I expect that using post.indexValue should work, and it does set the button ID on each repetition correctly, but the calling function doesn't work and the popup doesn't appear, and I'm not sure what I'm doing wrong.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
Issue is with id. Pop up is not working even if there is no ng-repeat and owner id starts with any number. Changing button id to "btn{{post.indexValue}}" worked for me. Try this fiddle.
<div ng-repeat="post in posts">
Click to open, move focus away to close:
<button id="btn{{post.indexValue}}" type="button" class="btn">
Click
</button>
<wj-popup class="popover" owner="#btn{{post.indexValue}}" show-trigger="Click" hide-trigger="Blur">
<ng-include src="'includes/popup.htm'"></ng-include>
</wj-popup>
</div>
Mobile Angular UI Is getting popular which is nothing but bootstrap 3 and angularjs combination
I would like to create a modal dialog box on button click and close the dialog on close icon, how to do it?
Based on the docs it says
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state='modal1'>
.....
</div>
</div>
But how to call this dialog, I tried this
<button ui-turn-on="modal1" class="btn btn-primary">Show Model</button>
But it is not working as expected, I am getting Warning: Attempt to set uninitialized shared state: modal1error
I think you have placed ui-content-for inside the ui-yield-to
Put it outside that div tag as follows
<div ui-yield-to="modals"></div>
<div ui-content-for="modals">
<div class="modal" ui-if="modal1" ui-state="modal1">
....your model html code
</div>
</div>
So that modals will remain as a place holder
The way accordion is built is one accordion below another
I want to be able to make them side by side.
I have a button that will open/close everyone at once.
I tried adding a span above the accordion-group but it didn't help.
<div id="top-panel" style="height:auto;border-bottom-style: outset;">
<accordion close-others="false">
<span ng-repeat="widget in _widgets">
<accordion-group id="widgetsAccordion" heading="{{widget.name}}" is-open="widget.isOpen">
moo
<button ng-click="getPreviewContent('{{widget.postId}}')">{{widget.name}}</button>
</accordion-group>
</span>
</accordion>
</div>
<div id="bottom-panel">
<div id="feed-panel" style="height:580px;width:1075px; float: left;border-right-style:outset;">
<button class="btn btn-primary" ng-click="toggleCollapse()">collapse</button>
</div>
<div id="preview-panel" style='float:right; width:570px;'>
<ng-include src="htmlInclude" />
</div>
</div>
How can I achieve this?
[edit]:
I realize I might not have explained this correctly.
I want the accordions to be VERTICAL, but just for them to be located side-by-side
[solution]:
Well the solution was pretty simple, just added style="display:inline-block" to the accordion-group. cheers
Well the solution was pretty simple, just added
style="display:inline-block" to the accordion-group.
cheers
I have come across a plugin called zAccordian.
http://www.armagost.com/zaccordion/
It is a horizontal accrodian, i think this should suffice for your needs.
If you would like to have that all tabs open with one click, there is a start parameter that can be passed through. Not sure how familiar you are with JQuery but this should do the trick.
Regards,
Warren
Can I place a conditional statement into the collapse directive for AngularUI?
I have the following setup, which has 3 radio-style buttons:
<div class="controls controls-row">
<div class="btn-group" data-toggle="buttons-radio">
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'meeting'">Meeting</button>
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'tour'">Tour</button>
<button type="button" class="btn" ng-model="radioPurpose" btn-radio="'other'">Other...</button>
</div>
</div>
<div class="controls controls-row">
<textarea class="span6" placeholder="Why are you here?" ng-model="textPurpose" collapse="{{ radioPurpose == 'other' }}"></textarea>
</div>
I would like textarea to show/hide according to the value of the radioPurpose buttons. I know the statement is evaluating to true at the appropriate time, but the directive always shows the textarea.
Copied answer from comment:
I haven't used AngularUI, but I'm guessing collapse expects an expression. Remove the curly braces: collapse="radioPurpose == 'other'"
Collapse is actually not the best way of doing a simple show/hide. A collapsed item has its height set to 0, rather than being set to display: none; it might not always have the effect you're expecting. I would suggest instead using ng-show or ng-hide.
http://docs.angularjs.org/api/ng.directive:ngShow
I saw that you solved it, and so did I and can share my JSFiddle; Toggle Collapse with Radiobuttons.
However, I see what S McCrohan mean, since I got a problem in my app. The collapse for the table did not work fully in my app first, since it collapsed but left the top row visible. It seems to require that you separate the divs, i.e. a div with collapse and a div with span# class, like following...:
<!-- START CHART AREA -->
<div collapse="chartCollapsed">
<div class="span12 well well-small">
<div id="chart_div" style="width: 600px; height: 400px;"></div>
</div>
</div>
<!-- END CHART AREA -->
<!-- START TABLE AREA -->
<div collapse="tableCollapsed">
<div class="span12">
<!-- TABLE OMITTED -->
</div>
</div>
<!-- END TABLE AREA -->