md-select options doesn't work with md-menu? - css

I'm having an issue with md-options being hidden behind an md-menu - I'm using the md-select in a 'sub menu' (see image below):
It was asked about here and the answer was given that md-select was not supported inside of an md-menu yet, but I wonder if anyone has found a workaround? In my case, I have a dropdown of different checkboxes/selection options in each sub menu so using something like md-chips would really be a pivot from what I'm trying to accomplish.
HTML
<md-menu>
<md-button ng-click="$mdOpenMenu()">open menu</md-button>
<md-menu-content>
<md-menu-item>
<md-menu>
<md-button ng-click="$mdOpenMenu()">First ></md-button>
<md-menu-content>
<md-menu-item>
option 1
</md-menu-item>
<md-menu-item>
option 2
</md-menu-item>
<md-menu-item>
option 3
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-item>
<md-menu-item>
<md-menu>
<md-button ng-click="$mdOpenMenu()">Second ></md-button>
<md-menu-content>
<md-input-container>
<md-select placeholder="Select an option..." ng-model="optionChosen">
<md-option ng-repeat="option in options" ng-value="option">
{{option}}
</md-option>
</md-select>
</md-input-container>
</md-menu-content>
</md-menu>
</md-menu-item>
</md-menu-content>
</md-menu>
JavaScript
app.controller('MainCtrl', function($scope) {
$scope.options = [
'option one',
'option two',
'options three'
];
$scope.optionChosen = null;
});
Working Code: Plunkr

Related

Use Three Dots span to trigger DropDown

I am using react-bootstrap, and have a button with a caret that triggers a dropdown.
But I need to use the vertical 3 dots instead, not in a button style.
I have a span that uses a CSS class for the three dots, but can't seem to find a way to get rid of the button and caret.
What I have tight now is this:
<Dropdown>
<Dropdown.Toggle>
<span className="threedots"></span>
</Dropdown.Toggle>
<Dropdown.Menu size="sm" title="">
<Dropdown.Header>Options</Dropdown.Header>
<Dropdown.Item .... ></Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
I just want to see the three dots (I'll add a mouse-over effect). Is there a way to use a snap as a toggle>
You can customise Dropdown by passing in custom subcomponents. Custom Dropdown Components
const CustomToggle = React.forwardRef(({ children, onClick }, ref) => (
<a
href=""
ref={ref}
onClick={e => {
e.preventDefault();
onClick(e);
}}
>
{/* custom icon */}
{children}
</a>
));
then pass as a custom toggle
<Dropdown >
<Dropdown.Toggle as={CustomToggle}>
</Dropdown.Toggle>
<Dropdown.Menu size="sm" title="">
<Dropdown.Header>Options</Dropdown.Header>
<Dropdown.Item .... ></Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
sample codesandbox,Hope be helpful

Not able to navigate ngbpopover close button using tab

I have used the separate close button to close the popover but not able to navigate to the close button using keyboard.
"#ng-bootstrap/ng-bootstrap": "^4.1.0",
code:
<div>
<ng-template #popContent>
<span id="glossary"> {{element.description| glossary:glossaryDescription}}</span>
<button class="close" (click)="p.close()" tabindex="0"><img src="assets/icons/close.svg"></button>
</ng-template>
<button class="popoverLink" [ngbPopover]="popContent" [autoClose]="false"
triggers="manual" #p="ngbPopover" (click)="p.open()" placement="top-right bottom-right"
container="body"
html="true" popoverClass="custom-popover">
{{split(element.description)[0]}}
</button>
/{{split(element.description)[1]}}
</div>

How can I check if a mat-menu in Material Angular is open?

I'm looking for a way to check if my mat-menu is open so I can add a class to the button that opened it using [ngClass] based on the state of the menu.
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
You can use Material matMenuTrigger directive to check whether the menu is open or not
<button mat-button [matMenuTriggerFor]="menu" #t="matMenuTrigger">Menu</button>
<mat-menu #menu="matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
{{t.menuOpen}}
Check the example here: https://stackblitz.com/edit/angular-9hbzdw
Now you use ngClass binding to change the style of your button!
You can bind your method on "menuOpened", that method will be invoked whenever Menu is opened
<mat-menu #menu="matMenu" [overlapTrigger]="false" (menuOpened)="isOpened($event)" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button mat-menu-item>Edit Agent</button>
<button mat-menu-item>Upload photo</button>
<button mat-menu-item>Deactivate Agent</button>
</mat-menu>
And add this method in your component,
isOpened(evt:any){
// set you flag here that you can use in ng-class for the button.
}
Hope this helps.
I faced the same suituation. And I made a CSS work around.
While we click on the menu a custom aria tag is appended to the menu and get removed while we close the dropdoen. With this we can use CSS custom selector (It works with most mordern browsers)
.parentclass a[aria-expanded] { whatever you need }
Some case (if button)
.parentclass button[aria-expanded] { whatever you need }
Thanks,
<button mat-stroked-button mdbWavesEffect [matMenuTriggerFor]="menu">Actions</button>
<mat-menu #menu="matMenu" [overlapTrigger]="false" panelClass="custom">
<a routerLink="/attendence/detail" mat-menu-item>View Attendance</a>
<a routerLink="/adherence/detail" mat-menu-item>View Adherece</a>
<button [ngClass]="selectedMenuItem ===1 ? 'active' : ''" (click)="onSelectMenuItem(1)" mat-menu-item>Edit Agent</button>
<button [ngClass]="selectedMenuItem ===2 ? 'active' : ''" (click)="onSelectMenuItem(2)" mat-menu-item>Upload photo</button>
<button [ngClass]="selectedMenuItem ===3 ? 'active' : ''" (click)="onSelectMenuItem(3)" mat-menu-item>Deactivate Agent</button>
</mat-menu>
selectedMenuItem = 1 // Initial value set to 1
onSelectMenuItem(id): void {
this.selectedMenuItem = id;
}
Sometimes you might face an issue with the mat-menu when your angular application uses the onPush changeDetection. So in that case you need to let Angular know that menu is open or closed.
Angular Material provides the event to detect if the menu is open or not.
menuOpened: Event emitted when the associated menu is opened.
menuClosed: Event emitted when the associated menu is closed.
Here is the code:
<button mat-button #menuOption="matMenuTrigger" [matMenuTriggerFor]="menu"
(menuOpened)="menuOption.menuOpen" (menuClosed)="menuOption.menuOpen">
Menu
<span>{{menuOption.menuOpen ? 'open': 'closed'}}</span>
</button>

How to get ::before element of DOM via CSS (CSS3)?

I'm trying to get the element and set some styles to it, but it's my first time and I can't achieve it. I also can't set id or class to the element, because it's dynamically generated. I'm searching for the easiest solution and believe, that you guys will help me with this simple question.
Here is my HTML:
<md-list class="no-paddings" flex="100">
<md-list-item flex="100" ng-repeat="adGroup in adsGroupsAndKeywords track by $index">
<md-menu>
<div layout="row" layout-align="space-between center">
<div ng-click="AdsGroupsCtrl.openMenu($mdOpenMenu, $event)">
<h6>
{{ adGroup.name }}
</h6>
<md-chips
ng-click="call($event)"
md-on-remove="AdsGroupsCtrl.removeKeywordFromGroupOfAds($chip);"
ng-model="adGroup.keywords"
readonly="true"
md-removable="true">
<md-chip-template>
<em>{{$chip.keyword}}</em>
</md-chip-template>
</md-chips>
<md-divider></md-divider>
</div>
</div>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="AdsGroupsCtrl.addToCurrentGroup($index)">
Добавить в данную группу
</md-button>
</md-menu-item>
<md-menu-item>
<md-button
ui-sref="app.expansionOfSemantics.adsList(
{
campaignsId: capmpaignId,
adId: adsGroupsAndKeywords[$index].id,
regionIds: adsGroupsAndKeywords[$index].regionIds,
keywords: keywords
})">
Сознать новую группу на основе текущей
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-list-item>
</md-list>
Thanks in advance
From your code I am not certain which your pseudo-element is. But in general you select pseudo-elements with ::before and ::after.
The pseudo-elements are created by the content-property, the ::before and ::after pseudo-selectors as the name implies just select the location.
::before{...} or ::after{...}
(select all pseudo elements on the website that are located as first or last child inside their parent element respectively)
.className::before{...}
(selects the pseudo-element that is located as first child inside the element with the class="className")
.className::before{content: '';}
(::before selects the first spot inside the element with the class="className" but its the content-property that creates the pseuod-element)

How to add triangle in drop down using angular-material

I am trying to create a drop-down using md-menu-bar and md-menu
you can see in snapshots
using the code
<md-menu-bar>
<md-menu>
<md-button aria-label="Open phone interactions menu" class="md-icon-button" ng-click="$mdOpenMenu($event)">
<img ng-src="https://media.licdn.com/mpr/mpr/p/5/005/098/12f/223c996.jpg" class="uilr-avatar">
</md-button>
<md-menu-content width="4">
<md-menu-item>
<md-button ng-click="ctrl.redial($event)">
<md-icon md-svg-icon="call:dialpad" md-menu-align-target></md-icon>
Redial
</md-button>
</md-menu-item>
<md-menu-item>
<md-button disabled="disabled" ng-click="ctrl.checkVoicemail()">
<md-icon md-svg-icon="call:voicemail"></md-icon>
Check voicemail
</md-button>
</md-menu-item>
<md-menu-divider></md-menu-divider>
<md-menu-item>
<md-button ng-click="ctrl.toggleNotifications()">
<md-icon md-svg-icon="social:notifications-{{ctrl.notificationsEnabled ? 'off' : 'on'}}"></md-icon>
{{ctrl.notificationsEnabled ? 'Disable' : 'Enable' }} notifications
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
</md-menu-bar>
but I want this drop down with a triangle at top
please check the snapshots taking from inbox.google.com
please tell how can I achieve this.
Thanks in advance
please check following fiddle
is that what you want?
[https://jsfiddle.net/suunyz3e/252/]

Resources