代码之家 › 专栏 › 技术社区 › Vingtoft

添加<form>破坏布局

material-design flexbox angular css html

Vingtoft · 技术社区 · 7 年前

代码(它有点长,可能只需要ctrl+f来查找标记并分析标记破坏布局的原因)

<mat表单字段> </mat表单域> 分发1 <mat option[value]=“2”> </mat选项> 第5区 <mat option[value]=“2”> </mat选择> </mat选项> </mat选项> 标准普尔4 </mat选项> </mat选择> </mat表单域> <mat表单字段> <mat select placeholder=“客户经理”> <mat option[value]=“1”> 上午1点 </mat选项> <mat option[value]=“2”> </mat选择> <div fxlayout=“行”> <input matinput[matdatepicker]=“picker”placeholder=“mde 1 dao”已禁用> <input type=“text”matinput placeholder=“mde 1 klokkeslet”/> </DIV> <mat datepicker toggle matsuffix[for]=“Picker2”></mat datepicker toggle> <input type=“text”matinput placeholder=“mde 2 klokkeslet”/> </DIV> <mat option[value]=“2”> </mat选项> <mat表单字段> </mat表单域> <input type=“text”matinput disabled placeholder=“vej”/> <mat form field fxflex=“45”> </mat表单域> </mat表单域> <input type=“text”matinput disabled placeholder=“postnumer”/> <DIV Fxflex></DIV> </mat表单域>


   
    
    
    
    
    
     
      <form>
     
     标签完全破坏布局:
    
    
     
      
     
    
    
    
    
     
     
     为什么表单会破坏布局,我如何解决这个问题?
    
    
    
    <div fxLayout="row" fxLayoutGap="20px" style="min-height: 500px;">

    <mat-card fxFlex="50" fxLayout="row">
      <form> <!-- THIS FORMS DESTROYS LAYOUT -->
        <div fxFlex="45" fxLayout="column">
            <mat-form-field>
                <input type="text" matInput placeholder="Navn pÃ¥ lÃ¦ge"/>
                <mat-error>Errors appear instantly!</mat-error>
            </mat-form-field>

            <mat-form-field>
              <mat-select placeholder="Distrikt">
                <mat-option  [value]="1">
                  Distrikt 1
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 2
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 3
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 4
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 5
                </mat-option>
                <mat-option  [value]="2">
                  Distrikt 6
                </mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field>
              <mat-select placeholder="Projekt Sygeplejerske">
                <mat-option  [value]="1">
                  SP 1
                </mat-option>
                <mat-option  [value]="2">
                  SP 2
                </mat-option>
                <mat-option  [value]="2">
                  SP 3
                </mat-option>
                <mat-option  [value]="2">
                  SP 4
                </mat-option>
              </mat-select>
            </mat-form-field>

            <mat-form-field>
              <mat-select placeholder="Account Manager">
                <mat-option  [value]="1">
                  AM 1
                </mat-option>
                <mat-option  [value]="2">
                  AM 2
                </mat-option>
              </mat-select>
            </mat-form-field>

            <div fxLayout="row">
                <mat-form-field fxFlex="45">
                  <input matInput [matDatepicker]="picker" placeholder="MÃ¸de 1 Dato" disabled>
                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
                  <mat-datepicker #picker disabled="false"></mat-datepicker>
                </mat-form-field>
                <div fxFlex></div>
                <mat-form-field fxFlex="45">
                    <input type="text" matInput placeholder="MÃ¸de 1 klokkeslet"/>
                </mat-form-field>
            </div>

            <div fxLayout="row">
                <mat-form-field fxFlex="45">
                  <input matInput [matDatepicker]="picker2" placeholder="MÃ¸de 2 Dato" disabled>
                  <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                  <mat-datepicker #picker2 disabled="false"></mat-datepicker>
                </mat-form-field>
                <div fxFlex></div>
                <mat-form-field fxFlex="45">
                    <input type="text" matInput placeholder="MÃ¸de 2 klokkeslet"/>
                </mat-form-field>
            </div>

            <mat-form-field>
              <mat-select placeholder="EPJ System">
                <mat-option  [value]="1">
                  XMO
                </mat-option>
                <mat-option  [value]="2">
                  Clinea
                </mat-option>
                <mat-option  [value]="2">
                  NOVAX
                </mat-option>
                <mat-option  [value]="2">
                  WinPLC
                </mat-option>
                <mat-option  [value]="2">
                  Ganglion
                </mat-option>
                <mat-option  [value]="2">
                  Medwin
                </mat-option>
              </mat-select>
            </mat-form-field>

        </div>
        <div fxFlex></div>
        <div fxFlex="45" fxLayout="column">
            <mat-form-field>
                <input type="text" id="autocompleteInput" matInput autocofus placeholder="SÃ¸g adresse"/>
            </mat-form-field>

            <mat-form-field>
                <input type="text" matInput disabled placeholder="Land"/>
            </mat-form-field>

            <mat-form-field>
                <input type="text" matInput disabled placeholder="Vej"/>
            </mat-form-field>

            <div fxLayout="row">
                <mat-form-field fxFlex="45">
                    <input type="text" matInput disabled placeholder="Husnummer"/>
                </mat-form-field>
                <div fxFlex></div>
                <mat-form-field fxFlex="45">
                    <input type="text" matInput placeholder="Etage"/>
                </mat-form-field>    
            </div>
            <div fxLayout="row">
                <mat-form-field fxFlex="25">
                    <input type="text" matInput disabled placeholder="Postnummer"/>
                </mat-form-field>
                <div fxFlex></div>
                <mat-form-field fxFlex="65">
                    <input type="text" matInput disabled placeholder="By"/>
                </mat-form-field>    
            </div>
            <div fxFlex></div>
            <div fxLayoutAlign="center center">
                <button fxFlex="35" mat-raised-button color="primary" routerLink="/administrator/create_doctor">Opret lÃ¦ge</button>
            </div>
          </div>
      </form> <!-- FORMS END TAG -->
    </mat-card>

    <mat-card fxFlex="50">
    <!-- LEFT OUT FOR SIMPLICITY --> 
    </mat-card>
</div>

1 回复 | 直到 7 年前

Venomy 7 年前

<mat-card fxFlex="50" fxLayout="row"> <form>

<表格> <form fxFlex="50" fxLayout="row">

此外,您可以删除 fxFlex="50" fxLayout="row" mat-card