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