I need to use a dropup menu.
This code worked perfectly with ui-bootstrap-tpls-0.10.0.js:
<div class="btn-group dropup">
<button type="button" class="btn btn-default" ng-click="print('PDF')">{{text}}</button>
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a ng-click="print('PDF')">Pdf</a></li>
<li><a ng-click="print('EXCEL')">Excel</a></li>
</ul>
</div>
After upgrading to ui-bootstrap-tpls-0.11.0.js, the dropup popup doesn't show anymore. Any help appreciated. The dropdown still works as expected.
Add the dropdown attribute to your outer div:
<div class="btn-group dropup" dropdown>
Related
I am upgrading bootstrap from 4 to 5. I found that data-toggle="dropdown" needs to be changed to data-bs-toggle="dropdown".
My problem is after I did the upgrade one of my dropdown boxes shows up on the left side of screen under the button which shows up on the right side of the screen. They are both in a div tag that should be right aligning and putting them on the right column of two columns. Can someone help me figure out how to keep the drop down from escaping the div tag. Note: When I resize the page the dropdown box goes where it should be.
<div id="pagetitle" class="row">
<div class="col-md-6">
<span class="page-title">Claims</span>
</div>
<div class="col-md-6">
<div class="pull-right">
<button id="dropdownCreateNew" type="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Create New <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCreateNew">
<li class="dropdown-item">Claim</li>
<li class="dropdown-item">Roster Bill</li>
<li class="dropdown-item">Hospice Notice</li>
</ul>
</div>
</div>
</div>
Here is a picture of how how the drop downs look.
https://i.stack.imgur.com/fthDP.png
After playing around I found that when I added an additional div tag after pull-right, that the group stayed together. Don't know why, but it worked.
<div class="col-md-6">
<div class="pull-right">
<div>
<button id="dropdownCreateNew" type="button" role="button" class="btn btn-warning dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Create New <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownCreateNew" role="menu">
<li class="dropdown-item">Claim</li>
<li class="dropdown-item">Roster Bill</li>
<li class="dropdown-item">Hospice Notice</li>
</ul>
</div>
</div>
</div>
I am unable to use up and down arrow buttons to focus on the drop down menu.
In my application, we are using angularjs.
Here is my code:
<div class="dropdown dropdown-eq2 form-group" dropdown>
<button class="btn dropdown-toggle" dropdown-toggle data-toggle="dropdown">
<span class="icon-e_icon_expand pull-right" style="margin-left: 5px;"> </span>{{personObj.type}}
</button>
<ul class="dropdown-menu num-of-views" role="menu" dropdown-menu>
<li role="presentation" ng-repeat="type in categoryArray">
<a role="menuitem" tabindex="-1" href="" ng-click="setSelectedType(type)"> {{type}}</a>
</li>
</ul>
</div>
Angular UI dropdown don't support UP/DOWN keyboard navigation's.
You can build custom directive on top of this will full fill your requirement.
You can refer this link Navigate the UI using keyboard
There are 2 div tags, i want to display only 1 based on value of SelectedVariant.InCart.
Code is as follows:
<div ng-if="1==0">
<a class="btn btn-success btn-md" ng-click="AddToCart(product.ProductID, SelectedVariant.VariantID)">Add to Cart
<span class="glyphicon glyphicon-plus"></span>
</a>
</div>
<div ng-if="1==1">
<a class="btn btn-default btn-xs" ng-click="PlusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-plus"></span>
</a>
<button type="button" class="btn btn-info disabled">{{3+2}} in cart</button>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
<a class="btn btn-default btn-xs" ng-click="MinusItem(product.ProductID, SelectedVariant.VariantID)">
<span class="glyphicon glyphicon-minus"></span>
</a>
</div>
But it displaying both the div elements. Can someone help me what is the issue?
your angular version is 1.0.7. directive ng-if is not in this version of angular.
its introduce in angular 1.1.5
check it in angular under Directives topic change log
AngularJS first added the ngIf directive in 1.1.5
please update the angular version and that will solve your problem. :)
I want to bring drop downs into my project and I took the code from the example. The drop down appears as in the example but when I click it nothing happens.
<form class="form" name="form" novalidate>
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button"
class="btn btn-primary dropdown-toggle"
dropdown-toggle
ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
<div>
</form>
Now the controller for this html:
angular.module('startupApp').controller('DropdownCtrl', function ($scope, $log) {
$scope.items = [
'The first choice!',
'And another choice for you.',
'but wait! A third!'
];
$scope.status = {
isopen: false
};
$scope.toggled = function(open) {
$log.log('Dropdown is now: ', open);
};
$scope.toggleDropdown = function($event) {
$event.preventDefault();
$event.stopPropagation();
$scope.status.isopen = !$scope.status.isopen;
};
});
I had the same problem and I solved by deleting the line dropdown-toggle
I don't know what the problem is but it works well in this way
Here what I did:
This si the original example:
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" dropdown-toggle ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
and this is the code without dropdown-toggle
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Edit:
The above example works if you are using angular-ui-bootstrap Version: 0.10.0
Now I've changed the ui-bootstrap using this
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>
And now all work like a charm
There are a few problems in your code:
Your HTML is not valid, the last <div> tag shouldn't be there
<form class="form" name="form" novalidate>
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button"
class="btn btn-primary dropdown-toggle"
dropdown-toggle
ng-disabled="disabled">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li>
Action
</li>
<li>
Another action
</li>
<li>
Something else here
</li>
<li class="divider"></li>
<li>
Separated link
</li>
</ul>
</div>
</form>
You did not reference ui.bootstrap as a module dependency
angular.module('startupApp', [
'ui.bootstrap'
])
Did you include the right files ?
AngularJS
Angular UI Bootstrap
Bootstrap CSS
You don't need anything special in your controller, the dropdown and dropdown-toggle directives are self-sufficient.
JsFiddle Demo
After much struggle I just found the answer that worked for my case. I only needed to add parse-angular to my angular.module('myapp'['parse-angular']).
First I want to say thank you to Jorge Casariego for his answer. His answer helped me to get much further.
There was one problem at the end though, that neither $scope.toggled = function(open) {...} nor $scope.toggleDropdown = function($event) {...} where called when someone interacted with the Dropdown (see example of them here). After looking into the ui-bootstrap-tpls-0.10.0.js code I had to further adjust the html-code:
the attribute dropdown should be a class-value not a attribute itself.
is-open=... is not needed, ui-bootstrap will take care of it
attach a ng-click to the <a> element in the list.
This did not work for me (dropdown as an attribute):
<!-- Single button -->
<div class="btn-group" dropdown is-open="status.isopen">
<button type="button" class="btn btn-primary dropdown-toggle"
ng-disabled="disabled">
Choose category <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="category in interactions">
<a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
{{category.displayName}}
</a>
</li>
</ul>
</div>
But this did (add dropdown as a class value):
<!-- Single button -->
<div class="btn-group dropdown">
<button type="button" class="btn btn-primary dropdown-toggle"
ng-disabled="disabled">
Choose category <span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li ng-repeat="category in interactions">
<a ng-click="toggleDropdown($event)" data-category="{{category.name}}">
{{category.displayName}}
</a>
</li>
</ul>
</div>
The rest of my Angular App looks like this then:
$scope.toggleDropdown = function($event) {
$event.preventDefault();
console.log('This is your event now: ', $event);
};
I know there are newer versions available of angular-ui-bootstrap, but for the record I put it up here. It works with version 0.10.0.
I have a dropdown button. If I select an item from the dropdown list, the main button's action should change to the items action, and the content too.
I tried one version, as you can see above, with controller:
<div class="btn-group">
<button type="button" class="btn" ng-click="mainFunction()">{{buttonCaption}}</button>
<button type="button" class="btn dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
Plunker example
But it's really ugly, and it would better with directive, for working more than one dropdown button. Somehow the directive should change the main button's ng-click behavior to the selected item's. Like this:
<!-- button one -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-danger">{{button1.name}}</button>
<button type="button" class="btn btn-danger dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>do something</li>
<li>do anything</li>
</ul>
</div>
<!-- button two -->
<div class="btn-group" dropdown>
<button type="button" class="btn btn-primary">{{button2.name}}</button>
<button type="button" class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
<span class="sr-only">Split button!</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</div>
Is anybody have a good idea or an example for that?
One way to accomplish something similiar (works best if your actions change based on context):
<div class="btn-group" dropdown>
<button type="submit" class="btn btn-primary" ng-click="submit()">
{{selectedAction.name}}
</button>
<button class="btn btn-primary dropdown-toggle">
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="action in actions">
<a ng-click="setAction(action)">{{action.name}}</a>
</li>
</ul>
</div>
Have a set of actions in the controller:
$scope.actions = [
{id: 'action1', name: 'Action 1'},
{id: 'action2', name: 'Action 2'}
];
And a function to set the current action:
$scope.setAction = function(action) {
$scope.selectedAction = action;
};
Then, you treat submit() as a dispatcher - it checks selectedAction.id and does the right thing or calls the right function. If you need to trigger the action as the item is selected do it in setAction().