<div ng-drag="true" ng-drag-start="onDragStart($data, $event)">
Draggable
</div>
The div is now draggable but none of the drag events are being fired i.e
ng-drag-start or ng-drag-move or ng-drag-stop or ng-drag-success
I do not have a drop area as I want the div to go back to its original position where it was dragged from.
What could be the reason? How do I fix this?
You have to wrap your draggable items in a ng-drop, Then you'll have access to the events like ng-drag-start and ng-drag-move
<div ng-drop="true" ng-drag-start="onDragStart();">
<div ng-drag="true">
Draggable
</div>
</div>
Related
I have in React a tooltip component that is wrapping a button component.
How can I position the tooltip relative to the button position?
<div class="tooltip">
<div class="button"></div>
</div>
Here is a codesandbox you can play with.
You cannot do that with the way your markup is structured. I would suggest you making a div that wraps both the elements.
<div class="wrapper">
<div class="button"></div>
<div class="tooltip"></div>
</div>
You would then apply position relative to the wrapper element. Then you can use position absolute on the tooltip to position it however you want it according to the wrapping 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
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.
http://plnkr.co/edit/vmKoBHEKq0wP3du7gtps?p=preview
I want to write directive for hide submenu on click but it is not working properly.
Hover click on menu, Submenu are display but click on submenu I cannot manage hide all submenu
I'm not sure if you really need a directive for doing this. If you don't, you could use simply 'ng-hide' and 'ng-click' directives to make this works.
In the element you want to hide, put ng-hide="hideSubmenu" and in the element who will hide it, put a ng-click="hideSubmenu = true".
In your code:
<body ng-controller="MainCtrl">
<p>Hello name {{name}}!</p>
<div>
<div class="col-md-1" style="padding-left: 00px;padding-right: 350px">
<div class="cssmenu" ng-hide="hideSubmenu">
...
<li>Type</li>
<li>Request</li>
...
</div>
</div>
</div>
</body>
I'm a noob about angular. I need a way to toggle only one element on a page.
Here is the plunker: http://plnkr.co/edit/W1eqgKiv5wv0hNkLDuzb?p=preview
If I click a button all the div are toggled/collapsed, but I need a way to collapse/toggle only the child element.
How about each model div controls its own destiny...
Plunker: http://plnkr.co/edit/rBCB9CflM7TsEEK5IAk1?p=preview
<div>
<button ng-model="collapsed1" ng-click="collapsed1 = !collapsed1">Toggle collapse</button>
<div ng-show="collapsed1">
<div class="well well-large">Some content</div>
</div>
</div>