nz-form inlineモードにおける多種類のコントロールのレイアウトが乱れる問題


nzFormのレイアウトが乱れる
nz-formレイアウトが乱れる原因
  • フォームパターン使用行:[nzLayout]="'inline'"
  • フォームには複数の種類のコントロールが使われています(inputdatepickerselect・・)日付選択コントロールが満ちていない場合がありますが、selectコントロールは次の行に押されて、次の効果
  • 公式のスタイルクラスを使って、幅を統一して解決します.
  • テンプレート対応CSS下のパターンで統一幅を設定する
    /*                 nz-select    form      */
    /* nz-form-control     */
    .ant-form-item-control-wrapper{
        width: 152.16px;
    }
    
    /* nz-form-item    */
    .ant-form-item{
        width: 221.2px;
    }
  • 設定後の効果は
  • その他の解決方法
  • 実際に使うべきではないinlineモードを使うべきhorizontalモードの一つnz-form-item中に4つ置くlabelcontrol
  • 一つnz-form-item一行