いくつかのレコードとページネーターを示すmdテーブルが下にあります。テーブルにfabボタンを表示したい(コンテンツのテーブルはその下で実行される)。
私が試したのは何ですか? <a md-mini-fab routerLink="." style=""><md-icon>check</md-icon></a>
タグ内で<md-table #table [dataSource]="dataSource" mdSort> </md-table>
を試しましたが、md-table
の下のすべてが破棄され、テーブル行がmaterial2 Tableコンポーネントによってレンダリングされるように見えます。
きれいな(クラスのみを使用しながら、多くのCSSを使用せずに)ソリューションがありますか?そうでない場合、CSSベースのソリューションは何ですか?
以下のコードは要件を満たしていますが、単純なソリューションと呼ばれるのはかなり汚いです。
位置、fixed、margin、z-index、bottomで遊んでいる間にしたことは、md-tableのすぐ下に(paginatorのレベルで)divを作成したことです。
<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>
注:より良い解決策が見つかった場合、回答を更新するか、新しい回答を投稿します。
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
をテーブルに追加しました。