调整屏幕宽度大小时,md-toolbar 从右侧截断
md-toolbar cuts off from right when resizing screen width
我正在为 angular 2 使用 material 设计,每次我减小屏幕宽度时,栏都会从右侧被截断并给我额外的空白。
navbar img small width
navar img original
这是我的代码
<md-toolbar color="primary">
<span>
Crayons and Clay</span>
<span class="fill-remaining-space"></span>
<div fxLayout="row" fxShow="false" fxShow.gt-sm>
<button md-button routerLink='' >Home</button>
<button md-button routerLink='/ourschool' >Our School</button>
<button md-button routerLink='/communityevents'>Community Events</button>
<button md-button routerLink='/admission'>Admissions</button>
<button md-button routerLink='/contact'>Contact</button>
</div>
<button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
<md-icon>menu</md-icon>
</button>
</md-toolbar>
<md-menu x-position="before" #menu="mdMenu">
<button md-menu-item routerLink="/signin">Sign in</button>
<button md-menu-item routerLink="/dashboard">Inquiry</button>
</md-menu>
<style>
.fill-remaining-space {
flex: 1 1 auto;
}
</style>
将你的 md-toolbar
放在另一个 div 中,宽度为 100%,flex-shrink
& flex-grow
设置为 0。同时为你的工具栏设置一个 min-width
.
In your component.css:
.fill-remaining-space {
flex: 1 1 auto;
}
.header {
min-width: 1024px;
width: 100%;
flex-shrink: 0;
flex-grow: 0;
}
... and in your component.html:
<div class="header">
<md-toolbar color="primary" layout-fill>
<span>Crayons and Clay</span>
<span class="fill-remaining-space"></span>
<div fxLayout="row" fxShow="false" fxShow.gt-sm>
<button md-button routerLink=''>Home</button>
<button md-button routerLink='/ourschool'>Our School</button>
<button md-button routerLink='/communityevents'>Community Events</button>
<button md-button routerLink='/admission'>Admissions</button>
<button md-button routerLink='/contact'>Contact</button>
</div>
<button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
<md-icon>menu</md-icon>
</button>
</md-toolbar>
<md-menu x-position="before" #menu="mdMenu">
<button md-menu-item routerLink="/signin">Sign in</button>
<button md-menu-item routerLink="/dashboard">Inquiry</button>
</md-menu>
</div>
这是一个正在工作的插件:DEMO
我正在为 angular 2 使用 material 设计,每次我减小屏幕宽度时,栏都会从右侧被截断并给我额外的空白。 navbar img small width
navar img original
这是我的代码
<md-toolbar color="primary">
<span>
Crayons and Clay</span>
<span class="fill-remaining-space"></span>
<div fxLayout="row" fxShow="false" fxShow.gt-sm>
<button md-button routerLink='' >Home</button>
<button md-button routerLink='/ourschool' >Our School</button>
<button md-button routerLink='/communityevents'>Community Events</button>
<button md-button routerLink='/admission'>Admissions</button>
<button md-button routerLink='/contact'>Contact</button>
</div>
<button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
<md-icon>menu</md-icon>
</button>
</md-toolbar>
<md-menu x-position="before" #menu="mdMenu">
<button md-menu-item routerLink="/signin">Sign in</button>
<button md-menu-item routerLink="/dashboard">Inquiry</button>
</md-menu>
<style>
.fill-remaining-space {
flex: 1 1 auto;
}
</style>
将你的 md-toolbar
放在另一个 div 中,宽度为 100%,flex-shrink
& flex-grow
设置为 0。同时为你的工具栏设置一个 min-width
.
In your component.css:
.fill-remaining-space {
flex: 1 1 auto;
}
.header {
min-width: 1024px;
width: 100%;
flex-shrink: 0;
flex-grow: 0;
}
... and in your component.html:
<div class="header">
<md-toolbar color="primary" layout-fill>
<span>Crayons and Clay</span>
<span class="fill-remaining-space"></span>
<div fxLayout="row" fxShow="false" fxShow.gt-sm>
<button md-button routerLink=''>Home</button>
<button md-button routerLink='/ourschool'>Our School</button>
<button md-button routerLink='/communityevents'>Community Events</button>
<button md-button routerLink='/admission'>Admissions</button>
<button md-button routerLink='/contact'>Contact</button>
</div>
<button md-button [md-menu-trigger-for]="menu" fxHide="false" fxHide.gt-sm>
<md-icon>menu</md-icon>
</button>
</md-toolbar>
<md-menu x-position="before" #menu="mdMenu">
<button md-menu-item routerLink="/signin">Sign in</button>
<button md-menu-item routerLink="/dashboard">Inquiry</button>
</md-menu>
</div>
这是一个正在工作的插件:DEMO