fxLayout="row" @angular/flex-layout": "2.0.0-beta.1" and angular material2
fxLayout="row" @angular/flex-layout": "2.0.0-beta.1" and angular material2
<p class="normal-gray-txt text-center">
<b>
Choose reference
architecture
</b>
</p>
<form[formGroup=""]="custAppDetail" (ngSubmit=""
fxLayout="column" >
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Architecture file source</label>
<md-select fxFlex = "3 1 40%" placeholder="abc"
formControlName="archFileSource" (ngModelChange="")="toNeoGit($event)">
<md-option* ngFor = "let env of archFileSrc"[value=""] = "env.value" >
{{ env.viewValue }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Architecture file</label>
<md-select fxFlex = "3 1 40%" placeholder= "Choose file" formControlName= "archFile" >
<md - option * ngFor = "let env of ar"[value] = "env.value" >
{ { env.viewValue } }
</md-option>
</md-select>
</div>
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Name</label>
<md-input fxFlex = "3 1 40%" type="text" placeholder="Enter Name"
formControlName="name">
</md-input>
</div>
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Cloud</label>
<md-select fxFlex = "3 1 40%" placeholder="Choose Chain"
formControlName="chaintype" (ngModelChange="")="toEnv($event)">
<md-option* ngFor = "let env of cl"[value=""] = "env.value" >
{{ env.viewValue }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Enviroment</label>
<md-select fxFlex = "3 1 40%" placeholder="Choose Environment"
formControlName="selEnv">
<md-option* ngFor = "let env of enviroment"[value=""] = "env.value" >
{{ env.viewValue }}
</md-option>
</md-select>
</div>
<div class="box-btn-dialog" [hidden=""]="ftUser">
<button md-raised-button="" class="auto-btn-prime"
disabled=""]="!custAppDetail.valid" type="submit">LAUNCH</button>
<button md-raised-button="" class="auto-btn-gray" md-dialog-close="cancel"
type="button">CANCEL</button>
</div>
</form>
对于第一行 fxLayout="row" 有效,但对于其余 4 行无效,我希望其余行在第一行呈现时呈现。我正在使用 "@angular/core": "^2.4.3","@angular/flex-layout": "2.0.0-beta.1",
而且 md-select 的高度与 md-input 不同;如何让所有字段的高度相同。
正如我在评论中提到的,您的 html 中有很多错误代码,例如 * ngFor
、md-raised-button=""
、[hidden=""]="ftUser"
、disabled=""]="!custAppDetail.valid"
。一旦你清理了这些东西,代码似乎就可以正常工作了。
html:
<p class="normal-gray-txt text-center">
<b>
Choose reference
architecture
</b>
</p>
<form fxLayout="column" >
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Architecture file source</label>
<md-select fxFlex = "3 1 40%" placeholder="abc">
<md-option *ngFor = "let env of [1, 2, 3, 4]" >
{{ env }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Architecture file</label>
<md-select fxFlex = "3 1 40%" placeholder= "Choose file">
<md-option *ngFor = "let env of [1, 2, 3, 4]" >
{{ env }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Name</label>
<md-input fxFlex = "3 1 40%" placeholder="Enter Name">
</md-input>
</div>
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Cloud</label>
<md-select fxFlex = "3 1 40%" placeholder="Choose Chain">
<md-option *ngFor = "let env of [1, 2, 3, 4]" >
{{ env }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Enviroment</label>
<md-select fxFlex = "3 1 40%" placeholder="Choose Environment">
<md-option *ngFor = "let env of [1, 2, 3, 4]" >
{{ env }}
</md-option>
</md-select>
</div>
<div class="box-btn-dialog">
<button md-raised-button class="auto-btn-prime">LAUNCH</button>
<button md-raised-button class="auto-btn-gray">CANCEL</button>
</div>
</form>
要解决输入行高问题,请将这些 css 添加到组件的样式表中。
.row-height{
min-height: 55px;
}
md-input{
margin-top: -15px !important;
}
<p class="normal-gray-txt text-center">
<b>
Choose reference
architecture
</b>
</p>
<form[formGroup=""]="custAppDetail" (ngSubmit=""
fxLayout="column" >
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Architecture file source</label>
<md-select fxFlex = "3 1 40%" placeholder="abc"
formControlName="archFileSource" (ngModelChange="")="toNeoGit($event)">
<md-option* ngFor = "let env of archFileSrc"[value=""] = "env.value" >
{{ env.viewValue }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Architecture file</label>
<md-select fxFlex = "3 1 40%" placeholder= "Choose file" formControlName= "archFile" >
<md - option * ngFor = "let env of ar"[value] = "env.value" >
{ { env.viewValue } }
</md-option>
</md-select>
</div>
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Name</label>
<md-input fxFlex = "3 1 40%" type="text" placeholder="Enter Name"
formControlName="name">
</md-input>
</div>
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Cloud</label>
<md-select fxFlex = "3 1 40%" placeholder="Choose Chain"
formControlName="chaintype" (ngModelChange="")="toEnv($event)">
<md-option* ngFor = "let env of cl"[value=""] = "env.value" >
{{ env.viewValue }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" >
<label fxFlex="1 6 60%"> Enviroment</label>
<md-select fxFlex = "3 1 40%" placeholder="Choose Environment"
formControlName="selEnv">
<md-option* ngFor = "let env of enviroment"[value=""] = "env.value" >
{{ env.viewValue }}
</md-option>
</md-select>
</div>
<div class="box-btn-dialog" [hidden=""]="ftUser">
<button md-raised-button="" class="auto-btn-prime"
disabled=""]="!custAppDetail.valid" type="submit">LAUNCH</button>
<button md-raised-button="" class="auto-btn-gray" md-dialog-close="cancel"
type="button">CANCEL</button>
</div>
</form>
对于第一行 fxLayout="row" 有效,但对于其余 4 行无效,我希望其余行在第一行呈现时呈现。我正在使用 "@angular/core": "^2.4.3","@angular/flex-layout": "2.0.0-beta.1", 而且 md-select 的高度与 md-input 不同;如何让所有字段的高度相同。
正如我在评论中提到的,您的 html 中有很多错误代码,例如 * ngFor
、md-raised-button=""
、[hidden=""]="ftUser"
、disabled=""]="!custAppDetail.valid"
。一旦你清理了这些东西,代码似乎就可以正常工作了。
html:
<p class="normal-gray-txt text-center">
<b>
Choose reference
architecture
</b>
</p>
<form fxLayout="column" >
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Architecture file source</label>
<md-select fxFlex = "3 1 40%" placeholder="abc">
<md-option *ngFor = "let env of [1, 2, 3, 4]" >
{{ env }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Architecture file</label>
<md-select fxFlex = "3 1 40%" placeholder= "Choose file">
<md-option *ngFor = "let env of [1, 2, 3, 4]" >
{{ env }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Name</label>
<md-input fxFlex = "3 1 40%" placeholder="Enter Name">
</md-input>
</div>
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Cloud</label>
<md-select fxFlex = "3 1 40%" placeholder="Choose Chain">
<md-option *ngFor = "let env of [1, 2, 3, 4]" >
{{ env }}
</md-option>
</md-select>
</div>
<div fxLayout = "row" class="row-height">
<label fxFlex="1 6 60%"> Enviroment</label>
<md-select fxFlex = "3 1 40%" placeholder="Choose Environment">
<md-option *ngFor = "let env of [1, 2, 3, 4]" >
{{ env }}
</md-option>
</md-select>
</div>
<div class="box-btn-dialog">
<button md-raised-button class="auto-btn-prime">LAUNCH</button>
<button md-raised-button class="auto-btn-gray">CANCEL</button>
</div>
</form>
要解决输入行高问题,请将这些 css 添加到组件的样式表中。
.row-height{
min-height: 55px;
}
md-input{
margin-top: -15px !important;
}