Here is the code
some.component.html
<div class="btn-group dropdown" normalizePosition ng-click="toggle()">
<button class="dropdown-toggle btn btn-sm btn-primary"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-cog"></i><span class="caret"></span> {{l("Edit")}}
</button>
<ul class="dropdown-menu">
<li>
<a (click)="openReport(id)">{{l('Run Report')}}</a>
</li>
</ul>
some.component.ts
openReport(id): void {
this.router.navigate(['/app/main/sale/viewer', id]);
}
When you are navigated to the sale viewer page in the browser the button is still showing and I'm not sure how to remove this after it's been clicked. Does anyone have ideas?
Related
I am using the bootstrap dropdown in my Angular project. but on click is not showing dropdown-menu. actually, after clicking, the show class not added in the drop-down and aria-expanded="false" is not change into "true
<div class="dropdown>
<button class="btn btn-secondary dropdown-toggle f-f-r f-14" type="button" id="dropdown123" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button
<span class="caret"></span>
</button>
<div class="dropdown-menu f-f-r f-14 p-t-12 p-b-12" aria-labelledby="dropdown123">
<a class="dropdown-item"
<button>S1 </button>
</a>
<a class="dropdown-item">
<button>S2 </button>
</a>
<a class="dropdown-item">
<button>S3 </button>
</a>
</div>
</div>
I tried your code without your custom style classes and only added a missing " at <div class="dropdown"> and a missing > at < class="dropdown-item"> and it worked for me.
Here is the working code with the missing stuff and without your custom css.
<div class="dropdown">
<button class=" btn btn-secondary
dropdown-toggle" type="button" id="dropdown123"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Save Button <span class="caret"></span>
</button>
<div class="dropdown-menu"
aria-labelledby="dropdown123">
<a class="dropdown-item">
<button>S1</button>
</a> <a class="dropdown-item">
<button>S2</button>
</a> <a class="dropdown-item">
<button>S3</button>
</a>
</div>
</div>
If it does not work please check if you are using Bootstrap 4, maybe it was different with V3 but I dont think so, not sure though.
Is there a way to specify that a button acts as both a dropdown trigger AND a tooltip source?
I've been able to get it to do one or the other, but not both. My code below works as a dropdown, but if I reposition the data-toggle="dropdown" to before the one for tooltip, then it renders a tooltip instead:
<button class="btn btn-sm dropdown-toggle"
data-toggle="tooltip" data-toggle="dropdown"
data-placement="bottom"
title="Test Tooltip">
You can initialize the tooltip through any attribute, id or class to avoid crossover with dropdown.
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-toggle-second="tooltip" data-placement="right" title="Tooltip on right">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
$('[data-toggle-second="tooltip"]').tooltip();
https://www.codeply.com/go/aFEQgHs1sC
In such cases I find it easiest to simply put the label of the button within a span that has the tooltip itself
<button class="btn btn-sm dropdown-toggle" data-toggle="dropdown">
<span data-toggle="tooltip" title="Test Tooltip">
Button label
<span>
</button>
This way the button has the toggle action for the click event (including on the label) but the label has the tooltip event, and the two data-toggle attributes are on different elements so don't clash.
You could try making something like this where you have the button as data-toggle="tooltip" And add a dropdown
<ul class="nav navbar-nav">
<li class="btn btn-sm dropdown" id="example" data-toggle="tooltip" data-placement="right" title="Test Tooltip" >
<a id="dropdown" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">Im a drop down with a tooltip <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdown">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Link or whatever</a></li>
</ul>
</li>
</ul>
$('#example').tooltip();
http://jsfiddle.net/h56xw8wq/67/
Currently the dropdown menu appears only if I click on the img tag. How to make it appear when I click on the button tag? Here is my code:
<div class="btn btn-link dropdown account-menu-btn">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul class="dropdown-menu pull-right" role="menu">
<li>
<a href="#">
Create
</a>
</li>
</ul>
</div>
I modified the code using data-target, but I still need to click on the image and not on the button to expand the dropdown menu. Any sugestions?
<div class="btn btn-link dropdown account-menu-btn" style="background-color:yellow" data-target="#myModal">
<a href="#" class="dropdown-toggle icon-el" data-toggle="dropdown" role="button" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
</a>
<ul id="myModal" class="dropdown-menu pull-right" role="menu">
<li>
<a href='#Url.Action("About", "Home")'>
Create
</a>
</li>
</ul>
</div>
I believe the answer is clearly stated in the twitter-bootstrap javascript section
Your code isn't really too far from what's on there:
<div class="btn btn-link dropdown account-menu-btn">
<a id="dLabel" data-target="#" href="#" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<img src="~/Assets/profile_pic.jpg" class="img-circle">
<span class="caret"></span>
</a>
<ul class="dropdown-menu pull-right" aria-labelledby="dLabel">
<li>
Create
</li>
</ul>
</div>
Hope this helps
You could also try to do it with Javascript and Jquery.
$( '#BUTTONID' ).click(function() {
$( '#MENUID' ).toggle();
});
This is a very condensed version, but it is ought to work.
I'm trying to make the values of my two bootstrap dropdown menus selectable. The site can be viewed here.
As you can see I have customised the dropdown menu's slightly within the CSS.
HTML:
<!-- City Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Select City <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li class="dropdown-header">City</li>
<li>Manchester</li>
<li>Liverpool</li>
<li>London</li>
<li>Newcastle</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Town</li>
<li>Wigan</li>
<li>St Helens</li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">Other</li>
<li>Warwick</li>
<li>Oxford</li>
<li>Cambridge</li>
</ul>
</div>
<!-- Version Dropdown -->
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Version <span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li>All</li>
<li>V1</li>
<li>V2</li>
<li>V3</li>
<li>V4</li>
<li>V5</li>
<li>V6</li>
<li>V7</li>
<li>V8</li>
</ul>
</div>
</div>
</div>
</div>
Thanks!
I used the answer posted by "GL.awog" - Consider silviomoreto.github.io/bootstrap-select, the standard bs dropdown menu is simply for navigation, not working as a select.
The site was easy to follow and I had this working in minutes :)
I am trying to include an input text in a bootstrap dropdown menu. But when I click the input text the menu disappears. This is the html code:
<th width="25px;">
<div class="dropdown">
<button class="btn btn-default btn-sm" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
N°
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
<label for="usr">Find:</label>
<li><input type="text" class="form-control"/></li>
<li>Asc</li>
<li>desc</li>
</ul>
</div>
</th>
I put the followng javascript, but it doesn't work:
$('.dropdown-menu input').click(function(e) {
e.stopPropagation();
});
Any help would be great.