我使用角度4及其各自的材质。我的app.component.html看起来像这样:
<!--The whole content below can be removed with the new code.-->
<md-toolbar color="primary" >
<button md-button (click)="sidenav.toggle()"><md-icon class="md-18|md-
24|md-36|md-48">menu</md-icon></button>
<span>Material 2</span>
<span class="example-spacer"></span>
</md-toolbar>
<md-sidenav-container layout="column" flex style="background: plum;">
<md-sidenav #sidenav side="left" class="example-sidenav" flex layout="column" style="background: plum;">
<md-list>
<div class="row">
<md-list-item><md-icon>explore</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>map</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>home</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>android</md-icon> <span>item</span></md-list-item>
</div>
<div class="row">
<md-list-item><md-icon>done</md-icon> <span>item</span></md-list-item>
</div>
</md-list>
</md-sidenav>
<md-grid-list cols="4" rowHeight="100px" layout="column" flex>
</md-grid-list>
</md-sidenav-container>
`
如何让md-sidenav-container
占据垂直留下的所有空间?
Plunkr:https://plnkr.co/edit/Mvm6zSifW0EpeKtmuSEA?p=preview
注意:我不想要CSS最小高度,高度:100%修复。 Angular Material 2/4只有基于干净的类/指令的解决方案。
答案 0 :(得分:2)
将您的
<?php
$ll = 'LLL:EXT:myext/Resources/Private/Language/locallang_db.xlf:';
return [
'ctrl' => [
'title' => $ll . 'document',
'label' => 'item_id',
'tstamp' => 'updated_at',
'crdate' => 'created_at',
],
'interface' => [
'showRecordFieldList' => ''
],
'columns' => [
'pid' => [
'label' => $ll . 'pid',
'config' => [
'type' => 'passthrough',
]
],
// ...
'item_id' => [
'label' => $ll . 'item.id',
'config' => [
'type' => 'input',
'size' => '10',
'eval' => 'int',
],
],
],
];
移到容器中,并将<md-toolbar>
属性添加到fullscreen
:
<md-sidenav-container>
有关详细信息,请参阅this answer