XPosition и yPosition в мат-меню не работают
Я попробовал xPosition и yPostion в самом угловом материале. Но это не работает. Я не знаю, упускаю ли я что-то.
<button mat-button [matMenuTriggerFor] = "menu">Menu</button>
<mat-menu #menu = "matMenu" xPosition = "after">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
Я сослался на несколько ссылок, в которых говорится, что проблема исправлена. Обратитесь сюда.
Я не мог понять это.
Заранее спасибо.
Ответы 3
Это отлично работает для меня. Вы ничего не пропустите. Код правильный. Это зависит от ориентации, которую вы пытаетесь добавить.
изображение1:
изображение2:
На этих картинках один и тот же код, на первом фото места под кнопкой нет.
наверное вы ее решили, но я все равно выкладываю, может кому пригодится.
Если вы следуете документы, все должно работать отлично (см. раздел #customizing-menu-position).
Причина, по которой это может не работать, вероятно, зависит от позиции, в которую вы поместили меню: например, если вы пытаетесь открыть его с помощью yPosition=выше, у него должно быть достаточно места, чтобы открыть его сверху, иначе оно откроется снизу. То же самое для xPosition.
Я знаю, это может звучать глупо, но для меня это было причиной того, что это не сработало.
HTML:
<button class = "myButton" mat-button [matMenuTriggerFor] = "menu">Menu</button>
<mat-menu yPosition = "above" #menu = "matMenu">
<button mat-menu-item>Item 1</button>
<button mat-menu-item>Item 2</button>
</mat-menu>
CSS:
.myButton{
margin-top: 90px;
}
Это серьезно, но у меня есть обходной путь. В отдельном файле css вы можете указать:
::ng-deep.mat-menu-panel {
/* These numbers are my requirement, put something which suits yours */
transform: translate(0px, 32px);
}
Но если даже после этого изменения вы столкнулись с этой проблемой, перейдите к следующему шагу, чтобы наложить панель:
::ng-deep.cdk-overlay-pane{
transform: translate(0px, 32px);
}
Удачи. Надеюсь это поможет...
Да, это работает идеально, второй вариант. Не пробовал первый, так как меню завернуто в .cdk-overlay-pane