I have a mat-sidenav and a list of mat-item and mat-menu. Then when I hover over of one of the items I want the menu to display. This part is working. But then when I move off of that menu or item and over a new item I want its menu to display.
https://stackblitz.com/edit/angular-xsscrm
I have included a stackblitz with a demo of the behavior.
What is wrong here I have both on enter and exit, but then when I leave a menu on to a new one, it doesnt open unless I click on it.
Thanks for the help
The issue here is that when a menu opens, it creates an overlay with a backdrop that overlaps all elements. This backdrop is causing the mouse events to not be 'seen' by the listening element until the overlay is dismissed via a mouse click. Luckily, the menu control has a flag to remove the backdrop; setting this to false fixes the issue you're seeing.
Side note: you have an *ngFor on the <mat-list> element, but I think you want to move it to the <mat-list-item> element instead because you want many list items, not many lists. Since you're using the local variable of *ngFor outside of the <mat-list-item>, you can create an <ng-container> element to house your *ngFor. See below stackblitz:
https://stackblitz.com/edit/angular-xsscrm-kx6jyd
Another side note: this behavior is similar to a tooltip. Perhaps that would be a better control for your use-case? https://material.angular.io/components/tooltip/overview
Related
When i click dropdown button and click it again for closing focus still remains. even when i move mouse away. How can focus removed for that case?
One possible solution is to remove the focus on the second click with the help of element.blur() - here are the related docs. You can add the class to the button on the first click and if the button has class (it will have on the second click) - just use blur.
But keep in mind, that some users want to interact with your site with the help of a keyboard, and removing focus will be annoying for them. Do you need focus to be visible on the button before opening the dropdown? Another possible solution is to remove :focus style from the element completely (outline: none), but it's not recommended.
I have a sidebar router-view element in my app.vue that is optional next to my "regular" router-view element. Now this sidebar has a transition effect when it opens and now I'm also trying to add sliding transitions when navigating within this sidebar. The idea is that this should work like in the iOS Agenda app:
I'm adding a transitionName depending on $route.to and $route.from but I'm not seeing how I'm getting the effect I want the way my template is structured now.
I've set up a sandbox here: https://codesandbox.io/s/vuepoc-etqvg
Click "Go to Day x"
Click on "Details" and de sidebar opens (works!)
Click on "Expenses" in de sidebar (Looks like it only needs overflow: hidden but didn't work for me)
Click on "Back" (This doesn't work at all..)
Is there someone that can give me a kick in the right direction? Am I on the right track? Should I structure my html/css differently? Or maybe even change the way I structure my routes and put the sidebar somewhere else?
I currently have a navigation that is based on the bellow image. (sorry about the terrible sketch) I have a tab along the top called "films" that is also classed as a department.
I would like the tab "films" to open the sub cat films located in the department tab as though the mouse was hovered over that.
Currently the department "films" is a list item under an ordered list of department and has an ID of MM05.
The tab "films" is again another li in an unordered list for the top bar that originally had its own drop down.
Not sure how I can get around this!
This is sadly not possible just using CSS as "Cascading" means that you can only go downwards with your selectors.
You would have to use Javascript for this.
This would look something like this
<script>
var linkToOpenDropDown=document.getElementbyId("filmLink");
var dropDown=document.getElementbyId("dropDownList");
linkToOpenDropDown.onmouseover=function() {
dropDown.style.visibility='visible';
};
linkToOpenDropDown.onmouseout=function() {
dropDown.style.visibility='hidden';
};
</script>
From your drawing, I am thinking you will have a static DIV that holds a sub menu. So on click it would "visibility: hidden / visible" change to what you need. I assume that is the location where you want it to show, so mouse over wouldn't work since you can reach it from the button location with out going mouseout...
Please do provide little more code or info on this, thanks.
If i understood correctly, I would make that a onclick (show, hide) type DIV, and have that div with LI use onMouseOver Show / Hide additional panels
I'm attempting to implement a multi-level drop-down navigation menu in CSS only but there's one small part which I just can't seem to get working correctly.
What should happen is:
1) When hovering over a menu item, it should be highlighted by using a different image (this works fine).
2) When hovering over a sub-menu item, the parent menu item should be highlighted.
Point 2 works fine up until I have a class .bottom on the parent menu item (this class is used as the image is slightly different). If the parent menu item has class .bottom, the highlight simply doesn't happen.
A demo of this can be viewed here: http://jsfiddle.net/cZFtW/2/
The demo shows that when hovering over Menu 1 > Sub Menu 3 > Sub Sub Menu X, Sub Menu 3 is highlighted. However, when hovering over Menu 2 > Sub Menu 3 > Sub Sub Menu X there is no highlight.
Can anyone see what I'm missing? On a side note, there's no real reason for not using Javascript here, I'd just prefer to have it all handled by CSS if possible (only need to support IE7+).
TL;DR; version: this fiddle shows the answer.
I understand what you mean. And I am pretty sure that the styling to which you need an answer to, which works for all except for the one at the bottom, has arisen purely by accident. (Kind a nice one I must say). I am almost certain of this, because your code as well as the file names lack any form of consistancy. There is double code, there is superfluous code, and there are images missing.
Therefore I have rewritten your markup and style sheet, and came to the fiddle as mentioned above.
Now, how does it work?
The trick is to attach the background image to an element inside the list item. In this case I chose for an anchor element, since that is most the likely. The first step is to change the background image at hovering the anchor, that's basic.
The second step is to change the background again when you hover over the submenu. At that point, the anchor element isn't hovered any more, but the list item is. So you can still change the background of the anchor element.
Note: in my solution there is a small difference to what you wish: when you hover the arrow, the background if the list item is already changed instead of until the cursor is over the submenu. If you want to prevent that, then you have to add an extra element for every sub menu like you had done yourself. But I think this is pretty nice also.
I have created a custom TitleWindow whcih i use as a popup. The contents of the popup are created dynamically depending on a selection a user makes from a datagrid.
My problem is, my datagrid is in another custom component whcih is toward the bottom of my page so when a user clicks one of the items the popup is displayed however with half of it out of sight at the bottom of the page.
Is there a way to position a popup so that it displays at the top of the page?
I know at least two things you can use to position a popup, though there might be more.
When you place a popup you can choose in which parent component to place the popup:
PopUpManager.createPopUp(this.parent, TitleWindowComponent);
In the component itself:
PopUpManager.centerPopUp(this);
I wanted a help tooltip type popup (with help text) to appear next to the icon that opened it. In the end I used move(x,y) to move the window where I wanted it. To get the coordinates to place it, use globalToLocal:
var globalX:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).x;
var globalY:Number = localToGlobal(new Point(myIcon.x, myIcon.y)).y;
toolTip.move(globalX + myIcon.width, globalY);
That puts the window just to the right of the icon, myIcon.