When you repeat the same selection item, already selected, the dropdown menu remains open. I would like to collapse the menu as it occurs when you select a different item. You can check this behavior in the demo. How can I modify the element to collapse the menu in any case?. Thanks.
The paper-dropdown-menu has an 'opened' property. You can listen on click of the dropdown content and if opened is true, set it to false.
Related
I have a p-contextmenu and p-table, I want to menu should be visible only when that particular row is selected. Right now with the below code once a row is selected, I am able to view the menu options on row right click, due to my condition: if(this.rowSelected)==null;
Html file:
<p-contextMenu #cm [model]="items" appendTo="body"></p-contextMenu>
<p-table #dt [(selection)]="rowSelected" [value]="listOfRows" [contextMenu]="cm" [dataKey]="id" [columns]="columns" (contextmenu)="onContextMenuSelect($event,cm)">
Ts file:
onContextMenuSelect(event,contextMenu){
if(this.rowSelected==null){
contextMenu.hide();
}
}
This only checks whenever a row is selected then on right click of any rows menu appears, I want to make it sure that for that particular row itself right click menu should appear and on right click of other row but without selection menu shouldnt appear.
I have a menu within a submenu with some items. When I open the menu by click and try to click on the submenu it doesn't open. I know because I set this property [autoClose]="true". But if I change the property to false, ok it open correctly the submenu but if I click outside the menu it does not close. The behaviour that I want is that if I click outside the menu I want that the menu does close.
https://stackblitz.com/edit/angular-ivy-vzzmeb
The submenu is called Roles
You can add a onBlur method to programmatically close the menu
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
Is there any way to position the opened dropdown menu? I mean as I click on the <select>, the options appear in the box which is located over the selected option. Is there any solution to move this options box down?
This is what happens:
What I want to happen:
Sample here : jsFiddle
<select>
<option>BMW</option>
<option>Mercedes</option>
<option>Ferrari</option>
<option>Audi</option>
<option>Fiat</option>
</select>
There's no way to position the option dropdown box from a select when using native controls, it's part of the built in control. You'd have to create custom select boxes to control the positioning of the dropdown.
When I click a button, then a drop down menu must be shown. When I click anywhere in the page it, needs to hide. The problem I have is here: when I run the page, I can see the drop down menu instead of the click event. I tried with different div tags, but to no effect.
Demo: http://jsfiddle.net/Navya/69KGD/
You need to set your dropdown list visibility to false (to hide it) when page loads.
$("#container").hide();
After that, when you click the button you set visibility to true (show it).
$("#container").show();