Is there a way to show a hint on the menu items in mx:Menubar object ?
If you by "hint" mean the tooltip text that appears when you hover over an item, you might find this page useful.
Related
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
been looking for a similar issue for a moment but couldn't find anything about that anywhere.
Working on an ASP.NET project and I need my asp:DropDownList to have it's elements sliding DOWN when selected.
When the selected item is the first one, everything is OK since I'm at the top of my element list, but if I select the dropdownlist when the selected item is like the XXth, the list will be displayed with a slide going up and down at the same time (that makes my currently selected item in the middle of the displayed list).
I want my list to be sliding down always, whatever my selected element position is (the same display as if the selected element was always the 1st).
Hope my question is clear.
If you need any screen, I'll send you some but it's probably not necessary.
Thanks by advance for your answers !
I am creating icon menu (toolbar with icons) in gtk# and I do not know why my application always selects (highlights) first icon (every parameter is default). Is there a way to have all icons unhighlighted (highlight only when cursor moves over icon or user clicks on icon)?
Every answer will be very much appreciated.
It looks like it has keyboard focus. You probably want to give another widget the default focus.
How to hide menu item from Menu object ?
You can't. Though there is a "enabled" property detected on the items you give to menubar, there is no such thing as "visible" property. I've searched for it ! :-) I've ended by manually looping over my menu items and removing them or adding theme from a raw, untouched collection of menuitems, so that the menubar only gets what it is supposed to display.
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.