Angular Material 2: How to set the fab button on top of the md table in the lower right corner?

Question

I have an md table showing some entries and a paginator below. I want to show the fab button on the table (the content table will work under it).

What have i tried? I tried <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a>inside the tags <md-table #table [dataSource]="dataSource" mdSort> </md-table>, but it looks as if everything is being md-tableunloaded, and the table rows are then displayed by the Material2 Table component.

Is there a clean (not using a lot of CSS, using only classes) solution for it? If not what is a CSS based solution?

Answer 1

, , .

, , : , margin, z-index bottom , div md- ( paginator).

<div style="z-index:5; position : fixed;display : flex; 
align-self : flex-end;bottom : 10%; margin-bottom : 68px;">

<a md-mini-fab routerLink="." style="margin-right : 14px;" (click) = 
"tShowAdu()"><md-icon>add</md-icon></a>
<a md-mini-fab routerLink="/main/create" style="margin-right : 14px;"><md-icon>add</md-icon></a>

</div>

. , .

Answer 2

md-table md-mini-fab div. position: absolute md-table right top css, .

HTML:

<div class="example-container mat-elevation-z8">
  <a md-mini-fab class="custom-button"><md-icon>check</md-icon></a>
  <md-table #table [dataSource]="dataSource" style="margin-top: 50px">
    ...
    ...
    ...
  </md-table>
</div>

CSS

.custom-button{
  position: absolute;
  right: 30px;
  top: 15px;
}

. , " ", margin-top: 50px , .

Answer 3

Use class="md-fab md-fab-bottom-right"