<mat-select> wrapped with <mat-form-field> and fixed relative issues.

This commit is contained in:
mustafahlvc 2017-10-12 14:05:22 +03:00
parent cb89da4647
commit 688b443ea8
4 changed files with 55 additions and 55 deletions

View File

@ -72,6 +72,7 @@
<mat-divider></mat-divider> <mat-divider></mat-divider>
<h3>Router Animation:</h3> <h3>Router Animation:</h3>
<mat-form-field class="w-100-p">
<mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation"> <mat-select class="p-0" [(ngModel)]="fuseSettings.routerAnimation">
<mat-option value="none"> <mat-option value="none">
None None
@ -92,7 +93,7 @@
Fade in Fade in
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field>
</div> </div>
</div> </div>

View File

@ -49,6 +49,7 @@
<!-- Front --> <!-- Front -->
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center"> <div class="pl-16 pr-8 py-16 h-52" fxLayout="row" fxLayoutAlign="space-between center">
<mat-form-field>
<mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange" <mat-select class="simplified font-size-16" [(ngModel)]="widgets.widget1.currentRange"
aria-label="Change range"> aria-label="Change range">
<mat-option *ngFor="let range of widgets.widget1.ranges | keys" <mat-option *ngFor="let range of widgets.widget1.ranges | keys"
@ -56,11 +57,10 @@
{{range.value}} {{range.value}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field>
<button mat-icon-button fuseWidgetToggle aria-label="more"> <button mat-icon-button fuseWidgetToggle aria-label="more">
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
</div> </div>
<div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center"> <div class="pt-8 pb-32" fxLayout="column" fxLayoutAlign="center center">
@ -306,14 +306,14 @@
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget6.title}}</div> <div class="h3">{{widgets.widget6.title}}</div>
<div class="py-16"> <mat-form-field>
<mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range"> <mat-select class="simplified" [(ngModel)]="widget6.currentRange" aria-label="Change range">
<mat-option *ngFor="let range of widgets.widget6.ranges | keys" <mat-option *ngFor="let range of widgets.widget6.ranges | keys"
[value]="range.key"> [value]="range.key">
{{range.value}} {{range.value}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</div> </mat-form-field>
</div> </div>
<div class="h-400"> <div class="h-400">
@ -356,8 +356,7 @@
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget7.title}}</div> <div class="h3">{{widgets.widget7.title}}</div>
<mat-form-field>
<div class="py-16">
<mat-select class="simplified" [(ngModel)]="widget7.currentRange" <mat-select class="simplified" [(ngModel)]="widget7.currentRange"
aria-label="Change range"> aria-label="Change range">
<mat-option *ngFor="let range of widgets.widget7.ranges | keys" <mat-option *ngFor="let range of widgets.widget7.ranges | keys"
@ -365,7 +364,7 @@
{{range.value}} {{range.value}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</div> </mat-form-field>
</div> </div>
<div class="p-16" fxLayout="row" fxLayoutAlign="space-between center" <div class="p-16" fxLayout="row" fxLayoutAlign="space-between center"
@ -438,16 +437,14 @@
<div class="fuse-widget-front mat-white-bg mat-elevation-z2"> <div class="fuse-widget-front mat-white-bg mat-elevation-z2">
<div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center"> <div class="px-16 border-bottom" fxLayout="row" fxLayoutAlign="space-between center">
<div class="h3">{{widgets.widget9.title}}</div> <div class="h3">{{widgets.widget9.title}}</div>
<mat-form-field>
<div class="py-16">
<mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range"> <mat-select [(ngModel)]="widget9.currentRange" aria-label="Change range">
<mat-option *ngFor="let range of widgets.widget9.ranges | keys" <mat-option *ngFor="let range of widgets.widget9.ranges | keys"
[value]="range.key"> [value]="range.key">
{{range.value}} {{range.value}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field>
</div>
</div> </div>
<div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row" <div class="p-16" fxLayout="column" fxLayoutAlign="center" fxLayout.gt-xs="row"

View File

@ -1,6 +1,6 @@
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg"> class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon> <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">mail</mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span> <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Mailbox</span>
@ -8,13 +8,14 @@
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}"> <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<mat-form-field floatPlaceholder="never">
<mat-select class="account-selection" placeholder="Mail Selection" <mat-select class="account-selection" placeholder="Mail Selection"
floatPlaceholder="never"
[ngModel]="selectedAccount"> [ngModel]="selectedAccount">
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key"> <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
{{account.value}} {{account.value}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field>
</div> </div>
</div> </div>

View File

@ -1,6 +1,6 @@
<!-- SIDENAV HEADER --> <!-- SIDENAV HEADER -->
<div fxLayout="column" fxLayoutAlign="space-between start" <div fxLayout="column" fxLayoutAlign="space-between start"
class="header p-24 mat-accent-bg" class.gt-md="header p-24 white-fg"> class="header p-24 pb-4 mat-accent-bg" class.gt-md="header p-24 pb-4 white-fg">
<div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center"> <div class="logo" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon> <mat-icon class="logo-icon s-32" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">check_box</mat-icon>
<span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span> <span class="logo-text" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">To-do</span>
@ -8,13 +8,14 @@
<div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}"> <div class="account" fxLayout="column" *fuseIfOnDom [@animate]="{value:'*',params:{delay:'300ms'}}">
<div class="title">John Doe</div> <div class="title">John Doe</div>
<mat-form-field floatPlaceholder="never">
<mat-select class="account-selection" placeholder="Todo Selection" <mat-select class="account-selection" placeholder="Todo Selection"
floatPlaceholder="never"
[ngModel]="selectedAccount"> [ngModel]="selectedAccount">
<mat-option *ngFor="let account of (accounts | keys)" [value]="account.key"> <mat-option *ngFor="let account of (accounts | keys)" [value]="account.key">
{{account.value}} {{account.value}}
</mat-option> </mat-option>
</mat-select> </mat-select>
</mat-form-field>
</div> </div>
</div> </div>