After the mat-menu is triggered and items are shown, the popup elements are not scrolling along with the page. Instead they seem to be broken from the mat-menu icon and they are always visible as I scroll the page.
<mat-icon class="mat-accent" [matMenuTriggerFor]="menuOptions">menu</mat-icon>
<mat-menu #menuOptions="matMenu"> <button mat-menu-item *ngFor="let menuItem of menuItems" (click)=selectMenuItem(menuItem)> {{menuItem.text}}</button> </mat-menu>
As shown in below picture, even though the initial menu-items popup appeared correctly, as I scroll the page, the popup elements are no longer attached to the above hamburger icon [which was attached with matMenuTriggerFor as shown in above code]
Issue will be fixed in the next version.
For now you can do workaround in .mat-menu-panel set position: fixed!important;
Related
I am using mat drawer sidenav and content.
In the sidenav i have a button. the button should be above the sidenav and the content and between them.
I am not able to present the button above the two and it gets overwritten by them.Stackblitz
i do prefer not to change the css of the material warpper elements and focus on the button itself if it's possible.
position: fixed
to the button, solved the issue.
I am trying add a button (to open the side panel) , but for some reason it shows up on the top left of the page. I want it to appear on the middle (right side) so when the user clicks on it the panel displays. I also want the current content on the page to zoom in when the side panel opens so the user is able to see both panel and the current content.
descripition of what you want talk
<div>
<button mat-button (click)="left.open()">Field Definitions</button>
</div>
what is the correct CSS to?
I believe you're looking for this, it's an example provided in the Angular Material Documentation.
There are several ways to position the sidenav toggle button, you can either use CSS Flexbox or just add float: right property to the button. I would choose the first method combined with the use of mat-toolbar.
I've created a 'show on hover' mat-menu button as you can see here:
https://stackblitz.com/edit/angular-show-hide-menu?file=app%2Fshow-hide-menu.scss
The problem is, when I click the button it disappears, leaving me with an odd-looking mat-menu. I've tried targeting the button's active or focus states using css (shown in the example) but that doesn't appear to help keep the active button appear.
When you click the button in the example you will see the blue background flash when the button is active, however it doesn't stay blue. The blue background is there just to debug, but basically I want the 'display: flex' css to kick in whenever the button is clicked i.e. while the selected menu is active.
Any help greatly appreciated!
-S. Arora
Your "More Options" button disappears because it's no longer active or focused after the menu opens. In fact, you can't make it active or focused because the menu creates a transparent backdrop layer that covers everything else on the screen, which you can see when you inspect the HTML. That's why you can't get the button to reappear while the menu is open.
One way around this is to watch the state of the menu itself and add a class to the button whenever its associated menu is open:
<button fxFlex="80" mat-icon-button matTooltip="More Options"
[matMenuTriggerFor]="optionsMenu" class="hover-display"
#menuTrigger="matMenuTrigger" [ngClass]="{ 'open': menuTrigger.menuOpen }">
Then you can use this class in your CSS instead of targeting the active or focused states:
.node .hover-display.open {
display: flex;
}
I have the following bootstrap 4 button code.What I am finding is that only on my mobile device, the button remains highlighted after clicked. The color of it is exactly the same as if I hovered it over with a mouse on my desktop device
<button class="btn btn-outline-primary d-inline">
Search
<i class="fa fa-search float-right" aria-hidden="true"></i>
</button>
Or in other words, it is pretty much the same as if I clicked on the button on my desktop mouse and dont hover away.
To me, it seems like one of the following occurred
On the mobile device, the click on the button simulates moving the mouse to that point and trigger the click event. However, the "invisible" mouse on the mobile device never hover away??
Something else?
How can I get rid of this behaviour?
Its because mobile browsers (modern ones) support hover state.
what you can do is override it for case of mobile with
button.btn:hover {
background-color: inherit || < your color >;
}
So here's a screenshot of a working nicely modal:
But whenever I hover or select an element inside the modal form, it acts like this :
It gets the <embed> image whenever I highlight a text or select a radio button in the <form> modal . Tried some css like z-index and the likes but didn't work. Any help are appreciated.