angular - How to modify the appearance of MD components -
in code:
<button md-icon-button [md-menu-trigger-for]="menu"> <md-icon>more_vert</md-icon> <md-menu #menu="mdmenu"> <button md-menu-item>item 1</button> <button md-menu-item>item 2</button> </md-menu> </button>
i trying put top: 67px;
i've tried this:
<md-menu style="top: 67px;" #menu="mdmenu">
or in <button md-menu-item
but has not worked, can see dynamically created, so
<div id="cdk-overlay-0" class="cdk-overlay-pane" dir="ltr" style="left: 480px; top: 15px; pointer-events: auto;">
i modified top
browsertop: 67px;
and works expect.
i tried add in component.css
file next:
.cdk-overlay-pane { top: 67px; }
but not seem work.
i have used it:
.test { top: 67px; }
and add in class
not work me.
how can modify top
in component, modifying .cdk-overlay-pane
or other way.
i'm sorry bad english. hope can understand me.
have tried what's written in documentation: https://material.angular.io/components/component/menu ?
customizing menu position
by default, menu display below (y-axis), after (x-axis), , overlapping trigger. position can changed using x-position (before | after) , y-position (above | below) attributes. menu can be forced not overlap trigger using [overlaptrigger]="false" attribute.
using [overlaptrigger]="false"
should work, @ least y-position
set below
.
Comments
Post a Comment