In my Angular 8 application, a fixed navigation bar exists on top of the screen. When a user hovers over a dropdown nav link, a menu will show up.
Now, if the user clicks on one of the menu links, the corresponding page will be opened using Angular Routing:
<div class="nav-left">
<div class="dropdown">
<a class="menu" routerLink="/home">
{{'HOME.TITLE' | translate}}
<span class="icon"><i class="fa fa-fw fa-angle-down"></i></span>
</a>
<div class="dropdown-content">
<a routerLink="/home/welcome">
<span class="icon"><i class="fa fa-fw fa-home"></i></span>
{{'HOME.TITLE' | translate}}
</a>
<a routerLink="/home/news-blog">
<span class="icon"><i class="fa fa-fw fa-newspaper-o"></i></span>
{{'HOME.NEWS_BLOG' | translate}}
</a>
<a routerLink="/home/features">
<span class="icon"><i class="fa fa-fw fa-cubes"></i></span>
{{'HOME.FEATURES' | translate}}
</a>
</div>
</div>
</div>
My SCSS definition has a .dropdown:hover selector that shows a menu only if it is hovered:
.dropdown {
.dropdown-content {
display: none;
}
&:hover {
.dropdown-content {
display: block;
}
}
}
What I would like to achieve is that the navigation menu closes automatically when the user clicks a menu link. Right now, the menu remains open because Angular Router does not reload the page but only replaces the page contents by the selected subpage.
In my opinion, there should be a pure CSS / SCSS solution to this problem, although it would be okay for me if it only works with some TypeScript code. My ideas have been so far:
use a special "click" or "selected" CSS selector to define display: none if a link has been clicked
activate some Angular function (if exists?) that resets the "CSS state" (as if the page would have been reloaded)
write a method to close all navigation menus when a routerLink has been clicked (seems too complicated)
Do you have any recommendations which of the mentioned approaches would fit best and how to realize it?
You could have a listener in your template along the lines of:
<div class="dropdown" [ngClass]="{'visible': menuVisible}" (mouseover)="toggleMenu()" (mouseout)="toggleMenu()">
And in your TS:
menuVisible = false;
toggleMenu() {
this.menuVisible = !this.menuVisible;
}
This would be a very simple implementation. You could also do it using Observables, for example (having a Subject emit for each mouse event).
EDIT: I totally forgot to add the click listener part haha! I think you got the idea though!
Related
I am working project with ace-1.3-master template and try to instal button dropdown who I put in most the bottom on the page of HTML.
My problem is the button not display fully of it's content and user need to scrolling manually html page to see whole of the button content . how I can make it automaticly without scrolling.
The button position
Try use position:fixed; in your css button.
Example:
div#myDIV {
position:fixed;
width:100px;
height:100px;
background:red;
left:10px;
top:100px;
}
Finally I find the solution.
Based from this question https://stackoverflow.com/questions/11715646/scroll-automatically-to-the-bottom-of-the-page
I do what #user5978325 was said.
This is the solution
I create a function containing this command
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
and then bind it to first level from my button element
my code look like this
<div class="btn-group">
<button class="btn btn-white btn-primary" >others</button>
<button onclick="scrollToLowest()" data-toggle="dropdown" class="btn btn-white btn-primary">
<span class="ace-icon fa fa-caret-down icon-only"></span>
</button>
<ul class="dropdown-menu dropdown-success">
<li>
Print Document PO
</li>
<li>
Send PO To Email
</li>
<li class="divider"></li>
</ul>
</div>
<script>
function scrollToLowest(){
$('html,body').animate({scrollTop: document.body.scrollHeight},"fast");
}
</script>
Thanks.
I'm using the NgbDropdown component in my Angular 2 application. It is working fine, however I want to remove the arrow that is displayed on the right side of the button.
<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
<button class="btn btn-outline-primary" id="dropdownMenu1" ngbDropdownToggle>Toggle dropdown</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenu1">
<button class="dropdown-item">Action - 1</button>
<button class="dropdown-item">Another Action</button>
<button class="dropdown-item">Something else is here</button>
</div>
</div>
Dropdown Image
Solution
Simply add the following CSS style to override the default style of the .dropdown-toggle::after pseudo-element:
.dropdown-toggle::after {
display:none;
}
Why?
By default bootstrap adds the arrow to the dropdown component via the ::after pseudo-element.
Doing this removes it.
Here is a LIVE DEMO demonstrating it.
How do you work it out?
Using chrome dev tools you can inspect the element:
We can see from the above that there is a style set for a pseudo-element ::after on the .dropdown-toggle class. Let's go and change the properties of the element! For this purpose we are changing the display property to none:
The pseudo-element is no longer there!!:
add the following style to override the default one
.dropdown-toggle::after{
content:initial
}
LIVE DEMO
In Bootstrap 4, you can remove the dropdown arrow which is called caret by declaring a $enable-caret SASS variable and setting it to false:
$enable-caret: false;
This overrides the default value of true set in the Bootstrap's _variable.scss:
// Options
//
// Quickly modify global styling by enabling or disabling optional features.
$enable-caret: true !default;
But keep in mind that it completely removes corresponding CSS styles. So, it's the best approach if you don't need carets globally and want to decrease your CSS payload.
I found you can do this within your app on a conditional basis by creating a custom class in styles.css
Note that using "!important;" is required or else elements at the bottom of the screen will still have a caret that points upward:
.remove-caret::after {
display: none !important;
}
html example with the custom class and replacing the icon with an ellipsis:
<div style="margin: auto; text-align: center">
<ul class="navbar-nav" [style.display]="'flex'">
<li class="nav-item d-inline-block" ngbDropdown>
<a class="nav-link dropdown-toggle remove-caret" style="color:#000; font-size: 1.1rem" ngbDropdownToggle href="#" role="button" aria-haspopup="true"
aria-expanded="false"><fa-icon [icon]="faEllipsisH" class="ml-2"></fa-icon></a>
<div ngbDropdownMenu aria-labelled-by="menuDropDown">
<a ngbDropdownItem href="#" (click)="test()">Test</a>
</div>
</li>
</ul>
</div>
I have a bootstrap drop down on my modal dialog.
After clicking on drop down button drop down menu appears under form.
Is there any way to fix this issue, but without using "position:fixed",because by using fixed attribute I am facing with other issues.
<div id="dialog" title="Basic dialog" ng-show='showDialog'>
<div class="container">
<h2>Dropdown</h2>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>AAAAAA</li>
<li>BBBBBB</li>
<li>CCCCCC</li>
<li>DDDDDD</li>
<li>EEEEEE</li>
<li>FFFFFF</li>
</ul>
</div>
</div>
</div>
See the dropdwon plnkr
The problem is that the dialog, wich is a div, efectively "contains" the dropdown and all it's contents, so the drowpdown stacking context is surrogated to it.
You can add this css rule to overcome your problem, but take it carefully so it doesn't have any side effects in other dialogs on your app:
<style>
.ui-dialog, #dialog, #container { overflow:visible; }
</style>
You also have a great article here explaining stacking contexts as Z-Index isn't what most people think...
First, I'm aware of this posts:
Activating bootstrap dropdown menu on hover
Bootstrap Dropdown with Hover
How to make twitter bootstrap menu dropdown on hover rather than click
And others, but still not found the correct solution yet, here's what I did so far.
first I used the is-open attribute from the angular-bootstrap dropdown directive like this:
<span class="dropdown" dropdown is-open="status.isopen">
<a
href
class="dropdown-toggle"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
>
hover me for a dropdown with angular-bootstrap
</a>
<ul
class="dropdown-menu"
>
<li ng-repeat="choice in items">
<a href>{{choice}}</a>
</li>
</ul>
</span>
that seemed to work but 2 bugs appeared:
the first is when dropdown-toggle element is clicked the dropdown menu is gone clicking again wont bring it back you have to mouseleave then mouse enter the dropdown-tooggle to get the dropdown-menu back.
the second is a css/html problem.
Usually the regular css solution for a dropdown is like this:
<a class="css-dropdown">
hover here with css.
<div class="css-dropdown-menu">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</div>
</a>
Notice the dropdown-menu now is inside the dropdown-toggle element which mean when moving with the mouse from the dropdown-toggle to the dropdown-menu it's moving from parent to child, so basically we still hovering over the dropdown-toggle since we are in it's child, which mean the dropdown-menu will still be visible, on other hand, the bootstrap dropdown works with the click event so having the dropdown-menu as a child of the dropdown-toggle is not needed, but now when someone wants to change the behavior to mouseenter/hover once the mouse leaves the dropdown-toggle the dropdown-menu disappear so we no longer have access to the dropdown-menu elements this is visible in this plunker
To fix the first bug, I just removed the dropdown directive then replaced the is-open with ng-class directive like this.
Change this:
<span class="dropdown" dropdown is-open="status.isopen">
to this:
<span class="dropdown" ng-class="{'open': status.isopen}">
The rest stays the same plunker that fixed the first bug.
The second bug is tricky, since the dropdown-menu is no longer a child of the dropdown-toggle the hover effect wont last while moving from the toggle to the menu, so I did this.
Changed this:
<ul class="dropdown-menu">
to this:
<ul
class="dropdown-menu"
ng-mouseenter="status.isopen = true"
ng-mouseleave="status.isopen = false"
>
That did it but another bug appeared when clicking the dropdown-menu item it stays open, so I kept hacking by doing this.
changed this:
<li ng-repeat="choice in items">
to this:
<li ng-repeat="choice in items" ng-click="status.isopen = false">
That give me the required behavior plunker.
That said, this is not a good solution since a lot of directives are involved here for a simple visual effect, the last plunker I provided contains a css solution with no Bootstrap or AngularJS involved, though it is the required behavior it is not the required html structure or visual result, what I need is to have a space between the dropdown-toggle and the dropdown-menu not a padding of the toggle element just an empty space, which make the css solution not valid in this situation.
So, my question is there a better way of doing this without adding a new plugin/library more clean and easily reusable solution for the hover drop down menu?
First, have the toggling on the top-most parent element (in this case, the <span>)
<span class="btn-group" dropdown is-open="status.isopen" ng-mouseenter="status.isopen = true" ng-mouseleave="status.isopen = false">
<a class="btn btn-primary dropdown-toggle" dropdown-toggle>
Button dropdown <span class="caret"></span>
</a>
<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>
</span>
This will allow the behavior you wanted - while still allowing clicking to show/hide the menu ;-)
However there's an annoyance: if you move the mouse cursor slower and pass the small gap between the toggle and menu, it will hide the menu.
So secondly, add a small CSS to remove the gap
.dropdown-menu {
margin-top: 0;
}
See the action in this plunker.
I know you want a solution without adding a new plugin/library, but you (or others seeking for this behavior) might want to try using No Close from Dropdown Enhancements lib to keep the dropdown open even after clicking in one of its options:
Do not close the menu on click on radio add class .noclose.
<div class="btn-group">
<button data-toggle="dropdown" class="btn btn-default dropdown-toggle">
Checked option <span class="caret"></span>
</button>
<ul class="dropdown-menu noclose">
<li>
<input type="radio" id="gr1_1" name="gr1" value="1">
<label for="gr1_1">Option 1</label>
</li>
<li>
<input type="radio" id="gr1_2" name="gr1" value="2">
<label for="gr1_2">Option 2</label>
</li>
<li>
<input type="radio" id="gr1_3" name="gr1" value="3">
<label for="gr1_3">Option 3</label>
</li>
</ul>
</div>
Also add a CSS solution for the hovering problem:
.btn-group:hover .dropdown-menu.noclose {
display: block;
}
.dropdown-menu.noclose {
margin-top: 0px;
}
And, of course, don't forget to import the libs:
<script src="./js/dropdowns-enhancement.min.js"></script>
<link href="./css/dropdowns-enhancement.css" rel="stylesheet"\>
In your case I suggest you to study the Dropdown Enhancements's source code to see how it works and maybe find a more suitable solution.
Try adding this line to your css:
.btn-group:hover>.dropdown-menu { display: block; margin-top: 0; }
You'll have to remove your is-open, ng-mouseenter and ng-mouseleave directives.
Below is the solution I came up with, while working on the same issue.
I used a simple custom directive that:
binds the mouseenter and mouseleave events to the dropdown in order correctly to show/hide the menu.
dynamically adds a custom CSS class to the dropdown menu in order to prevent the menu from disappearing when moving the cursor from the button to the menu. Note that this solution has the advantage of not removing the visual gap between the button and menu.
prevents the menu from disappearing when the button is clicked.
The CSS rule uses a before pseudo-element to fill the gap between the button and the menu. I added the border property which can be uncommented to easily get a visual feedback.
.dropdown-hover-menu::before {
content: '';
position: absolute;
left: 0;
width: 100%;
top: -3px;
height: 3px;
/*border: 1px solid black;*/
}
The HTML structure of the snippet is based on the available examples in the dropdown section of the angular-ui bootstrap documentation
angular.module('app', ['ui.bootstrap'])
.directive('dropdownHover', function() {
return {
require: 'uibDropdown',
link: function(scope, element, attrs, dropdownCtrl) {
var menu = angular.element(element[0].querySelector('.dropdown-menu')),
button = angular.element(element[0].querySelector('.dropdown-toggle'));
menu.addClass('dropdown-hover-menu');
element.bind('mouseenter', onMouseenter);
element.bind('mouseleave', onMouseleave);
button.bind('click', onClick);
function openDropdown(open) {
scope.$apply(function() {
dropdownCtrl.toggle(open);
});
}
function onMouseenter(event) {
if (!element.hasClass('disabled') && !attrs.disabled) {
openDropdown(true);
}
};
function onMouseleave(event) {
openDropdown(false);
};
function onClick(event) {
event.stopPropagation();
}
scope.$on('$destroy', function() {
element.unbind('mouseenter', onMouseenter);
element.unbind('mouseleave', onMouseleave);
button.unbind('click', onClick);
});
}
};
});
.dropdown-hover-menu::before {
content: '';
position: absolute;
left: 0;
width: 100%;
top: -3px;
height: 3px;
/*border: 1px solid black;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.3.3/ui-bootstrap-tpls.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div ng-app="app">
<div class="btn-group" uib-dropdown dropdown-hover>
<button type="button" class="btn btn-primary dropdown-toggle">
Button dropdown <span class="caret"></span>
</button>
<ul class="dropdown-menu" uib-dropdown-menu role="menu">
<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>
</div>
(How) Can I place a link within a twitter bootstrap "list-group-item" that is itself a link without messing up the list-group-item format? (see below)
<div class="list-group">
<a href="#" class="list-group-item active">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
<a href="https://www.facebook.com/sharer/sharer.php?u=http" target="_blank">
Share on Facebook
</a>
</a>
</div>
You can't use <a> tags inside other <a> tags, that's invalid HTML. Check this question.
You can make it clickable with jQuery though, with an hack like this:
HTML - use a div instead with a custom class and some data-tags:
<div class="list-group">
<div class="list-group-item active list-group-item-linkable"
data-link="http://www.google.com">
<h4 class="list-group-item-heading">List group item heading</h4>
<p class="list-group-item-text">...</p>
<a href="https://www.facebook.com/sharer/sharer.php?u=http"
target="_blank">
Share on Facebook
</a>
</div>
</div>
CSS - make it seem like a link:
.list-group-item-linkable:hover {
color: #555;
text-decoration: none;
background-color: #f5f5f5;
cursor: pointer;
}
JS - the fun part:
$(document).ready(function() {
$('.list-group-item-linkable').on('click', function() {
// same window/tab:
window.location.href = $(this).data('link');
// new window/tab:
//window.open($(this).data('link'));
});
$('.list-group-item-linkable a, .list-group-item-linkable button')
.on('click', function(e) {
e.stopPropagation();
});
});
I've also created a JSFiddle.
I am confused, you want the entire thing to be a link? It may take a couple more steps - nothing a little copy-and-pasting cant handle - but why not just manually provide an 'a' tag to each of the children of the "list-group"