转载

nz-form inline 模式下多类型控件打乱布局的问题

nzForm 布局被打乱

nz-form 布局被打乱的原因

  1. 表单样式使用行内: [nzLayout]="'inline'"
  2. 表单中使用多中类型的控件( inputdatepickerselect

    会出现日期选择控件没有充满,同时 select 控件会被挤到下一行,看看下面的效果

nz-form inline 模式下多类型控件打乱布局的问题

使用官方的样式类设置统一宽度解决

  • 在模板对应的 CSS 中使用下面的样式设置统一宽度

    /* 通过设置下面两个样式的宽度解决 nz-select 打乱 form 布局的问题*/
    /* nz-form-control 外围类 */
    .ant-form-item-control-wrapper{
        width: 152.16px;
    }
    
    /* nz-form-item 样式类*/
    .ant-form-item{
        width: 221.2px;
    }
  • 设置后的效果是:
  • nz-form inline 模式下多类型控件打乱布局的问题

其他解决方法

  • 实际不该使用 inline 模式,而应该使用 horizontal 模式,一个 nz-form-item 中放置4个 labelcontrol
  • 因为一个 nz-form-item 是一行
原文  https://segmentfault.com/a/1190000019742206
正文到此结束
Loading...