I got a wrapper that stops event propagation because of other things happening in and with that wrapper. In that wrapper I got several directives with UI Bootstrap dropdowns.
The problem is, that these dropdowns doesn't close on any click. Only by clicking another dropdown.
It seems that UI Bootstrap Dropdown watches click on body or something to close all dropdowns.
<div class="wrapper" ng-click="$event.stopPropagation()" style="width: 100%; height: 300px; background:grey;">
<div class="btn-group" uib-dropdown>
<button id="split-button" type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger" uib-dropdown-toggle>
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="split-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
<li role="menuitem">Something else here</li>
<li class="divider"></li>
<li role="menuitem">Separated link</li>
</ul>
</div>
https://plnkr.co/edit/bHHrpipM4MlxLNfOE2pt?p=preview
Any ideas to solve this?
Thanks for your help!
According to source code the event handler for closing of dropdown element is getting attached to window.document element:
$document.on('click', closeDropdown);
but at the same time $event.stopPropagation() method prevents click event from being executed.
If you want dropdown to trigger events in this scenario then you could bind click event to dropdown that basically triggers document element click event:
$scope.dropDownClick = function($event) {
angular.element(document).triggerHandler('click');
};
Dropdown element
<ul class="dropdown-menu" ng-click="dropDownClick($event)" uib-dropdown-menu role="menu" aria-labelledby="split-button">
...
</ul>
Forked plunker
A workaround you could use is shown at this working plnkr.
You need to stop wrapper's propagation and use a variable to toggle dropdown's is-open attribute.
Related
I am trying to use ng-repeat in bootstrap dropdown menu, but it does not display the list of elements in drop down. am i missing anything in populating the elements of drop down list from a method defined in controller.
<button type="button" class="btn btn-default btn-sm" title="Results Per Page">
<span class="dropdown" dropdown>
<a href class="dropdown-toggle" dropdown-toggle>
<span class="caret"></span>
{{Temp.obj.pageSize}} Results Per Page </a>
<ul class="dropdown-menu">
<li data-ng-repeat="result in Temp.obj.availPages">
<a href data-ng-click="Temp.obj.setSize(result)">
{{result}}</a>
</li>
</ul>
</span>
</button>
You are simple missing the dropdown-menu directive in the ul list.
As a reminder, here is the (simplified) example from the angular-ui bootstrap doc.
<div class="btn-group" uib-dropdown>
<button id="single-button" type="button" class="btn btn-primary" uib-dropdown-toggle>
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu" aria-labelledby="single-button">
<li role="menuitem">Action</li>
<li role="menuitem">Another action</li>
</ul>
</div>
It looks like you are using an old version of angular-ui bootstrap when the directive were not prefixed by uib-. I recommend updating your version if you can. Otherwise, just remove the prefixs from the example.
Edit: As you are using the version 1.1.2 of angular-ui bootstrap, you need to prefix the directives as shown in this answer. And here is the doc for reference
I am trying to Disable the Bootstrap dropdown by setting data-toggle="" which is not working .The ul has lis ng-repeating on one array and if that array is empty i am setting data-toggle="" to not open the empty li.But this is not working it is still opening an empty list as given below.
Here is the template. you can see at <button> that the data-toggle is empty not dropdown.Still it opens the list.
<div name="originFilter" id="originFilter" class="dropdown pa-leftFilter-dropdown-div open">
<button id="selectBrand" class=" btn btn-default dropdown-toggle" type="button" disabledropdown="" disable="brands" data-toggle="" aria-expanded="true">
<span id="selectedBrand" class="pa-text-wrapper-ellipsis pa-filter-selected-span ng-binding" ng-attr-title="{{selectedProperties.brand}}" title="LISTERMINT">BEBE</span><span class="caret"></span>
</button>
<ul class="dropdown-menu pa-filter-dropdown" role="menu" aria-labelledby="OriginDropDown">
<!-- ngRepeat: brand in brands -->
</ul>
</div>
Use ng-disabled true/false for making dropdown enable/disable
I have a bootstrap dropdown with checkboxes. I want to use this in Angular.
http://codepen.io/bseth99/pen/fboKH (i dont use any of the javascript in there and I wrap the dropdown in a form)
<form>
<div class="container" ng-controller="HomepageController">
<div class="row">
<div class="col-lg-12">
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> <span class="caret"></span></button>
<ul class="dropdown-menu">
<li><input type="checkbox"/> Option 1</li>
<li><input type="checkbox"/> Option 2</li>
<li><input type="checkbox"/> Option 3</li>
</ul>
</div>
</div>
</div>
</div>
</form>
Inside HomepageController:
$scope.callMe = function (event){
event.preventDefault();
return false;
}
I notice that whenever I click on an option or anywhere in the checkbox, it redirects and refreshes the page to go to /#. I tried putting an ng-click on the "a" tag such that it calls a function in a controller that has "return false", no luck. Page still redirects. How do I prevent the page from redirecting and output the "option" that is checked?
The issue is......
I want the checking of a box to trigger an event.
Checkboxes don't appear to actually check when I click on the checkbox.
Want to make sure I can check multiple boxes without the dropdown closing itself after clicking on any individual option.
Use
<a href="javascript:void(0)" ....>
it's essentially a no-op and will cause no navigation.
I am pretty new to AngularJs. I have to toggle a section and used the ng-click like below:
<div class="panel panel-secondary scroll" href="#feedList-os" class="collapsedOs" ng-model="collapsedOs" ng-click="collapsedOs=!collapsedOs">
<ul id="feedList-app" class="list-group" ng-show="collapsedOs">
<li class="list-group-item clearfix">
<div class="panel panel-container scroll">
<button id="details" class="btn btn-danger" data-toggle="modal" data-target="#myModal">Details</button>
</div>
</li>
</ul>
</div>
This is working fine as expected, but I have a button inside the div with class panel panel-container scroll has a button. I do not want the toggle logic to be applied for clicking the button. Even if I override the ng-click on the button, that's not overriding the default functionality.
If you add ng-click on the inner button, you can pass in an event object $event.
<button id="details" class="btn btn-danger" data-toggle="modal" data-target="#myModal" ng-click='doWork($event)'>Details</button>
In the handler code you can do prevent bubble through for this event.
$scope.doWork($event) {
$event.stopPropagation
}
I use Bootstrap v2.2.2
And this is my button:
<div class="pagination ">
<ul>
<li>
<a href="" class="btn btn-success btn-large">
<i class="icon-fast-forward"></i>
</a>
</li>
</ul>
</div>
However, when I try to focus on button I get strange behavior of colors:
Demo in Fiddle
The fix is to remove pagination class or <ul> tag
How can I fix it?
Thank you,
(**comment: I'm not interesting to use bootstrap 3.0)
Changing the tag from anchor to button, it solves your display issue. I updated your fiddle
<button class="btn btn-success"> <i class="icon-fast-forward"></i> </button>