Angular Material 2 : How to put a fab button on top of the md-table at the bottom right corner?

Question

I have a md-table showing some records and a paginator below. I want to show a fab button on the table (the table of content would run under it).

What I tried? I tried <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a> inside the <md-table #table [dataSource]="dataSource" mdSort> </md-table> tags , but looks like everything under md-table is scrapped out and the table rows are then rendered by the material2 Table component .

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

Solution 1

The code below meets the requirements but is pretty dirty to be called straight forward solution.

What i did while playing with position : fixed , margin , z-index and bottom was that i made a div just below the md-table (on the level of 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>

Note : Would update the answer or Post a new one if a better solution is found.

Solution 2

You can wrap the md-table and md-mini-fab inside a div. Then, you can use position: absolute to float to the button on top of the md-table and use right and top css properties to adjust the position of the button.

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;
}

Plunker demo

Note: Since you mentioned "the table of content would run under it" I added margin-top: 50px to the table to position it below the button.

Comments

[Aakash Uniyal]

Hi nehal this is not the right solution , position absolute would make the button be positioned from the top of the screen rather than inside the div . Try to add <br> tags just before <div class="example-container mat-elevation-z8"> and you would know what i'm talking about :D

[Aakash Uniyal]

Though i've solved it by similar way would post the answer shortly . But doing a position absolute is not that pretty it is barely functional . Thanks for the answer though .