I want to somehow style my mat-menu to work a little bit like a modal( dialog ). However styling is quite a challange for me, Could you please advise how to move buttons (save and reset) to the right and make a space between them ? I ve tried to apply styles to them however they' re not working.

I have tried to create my own css class and apply it to html button however nothing happens - Please look stackblitz https://stackblitz.com/edit/angular-rtscpl?file=src/app/app.component.html

CodePudding user response：

If you want to align your buttons to the right and add a gap you can easily add some flex styles around your buttons:

Example:

    <div style="width: 100%; display: flex; gap: 10px; flex-direction: row; place-content: flex-end;">
      ...
    </div>

You can even add these styles to the mat-toolbar-row.

CodePudding user response：

Do not change the style of a library.

If the library makes updates on the code, you have to follow through. Moreover, it breaks the purpose of implementing the library : it's called Angular Material because it implements Material Design. If you change it, what's the point of using the library ?

Instead, use the CDK. The menu is part of it and offers the exact same feature, minus the CSS.

Start from there, it should be easier to work with.