CODEWITHSUNDEEP
javascriptreactjsantd
Archit Sandesara
Archit Sandesara

Reputation: 645

How to set the layout="horizontal" inside for few <Form.Item> while keeping <Form layout="vertical"> in ant design

I have a <Form> which has layout="vertical" but inside this Form I want to set some items to have layout="horizontal".

I tried <Input.Group compact> which displayed <Form.Item> in the same row but I also want the label "TestLabel" of the <Form.Item> and <Input/> box in the single row.

           <Form
            layout="vertical"
            size="medium"
           >
                 <Input.Group compact>
                          <Form.Item label={product.productName + " : "} />
                        <Form.Item label={"TestLabel"} >
                             <Input />
                        </Form.Item>
                 </Input.Group>
          </Form>

However "TestLabel" and Input box is aligned vertically but I want it horizontally aligned. I'm using React with Ant Design.

Upvotes: 8

Views: 15335

Answers (3)

mleister
mleister

Reputation: 2565

Here is my simple & elegant solution with styled-components. If you don't want to use styled-components, you can also simply overwrite the classes with standard CSS. Note: I copied the direct classes from a horizontal antd input and did not reinvent the wheel. With this solution you can create a horizontal form item within a vertical form as usual.

const FormItemHorizontal = styled(Form.Item)`
  .ant-row.ant-form-item-row {
    flex-direction: row;
  }
  
  .ant-form-item-label {
    white-space: nowrap;
    text-align: end;
    padding: 0;
  }

  .ant-form-item-control {
    flex: 1 1 0;
    min-width: 0;
  }
  
  .ant-form-item-label > label {
    height: 32px;
    
    &::after {
      display: block;
      content: ':';
      position: relative;
      margin-block: 0;
      margin-inline-start: 2px;
      margin-inline-end: 8px;
    }
  }
`

Usage:

<Form layout="vertical" ... >
  <FormItemHorizontal name="discountPercent" label="Rabatt" labelCol={{span: 8}} wrapperCol={{span: 16}}>
    ...
  </FormItemHorizontal >
</Form>

Upvotes: 3

Mandi Gunningham
Mandi Gunningham

Reputation: 51

I just encountered this issue and the way I solved it was by setting the form layout to horizontal and the form items that I want to be vertical set the labelCol={{ span: 24 }}, i.e. full width, which will bump the input field to the next line. For you I think it would look something like this:

<Form
    layout="horizontal"
    size="medium"
>
       <Input.Group>
           <Form.Item label={product.productName + " : "} />
           <Form.Item label={"TestLabel"} labelCol={{ span: 24 }}>
               <Input />
           </Form.Item>
       </Input.Group>
</Form>

Upvotes: 5

Rafael Barbosa Silva
Rafael Barbosa Silva

Reputation: 11

To solve this problem I created two classes and applied them at Form.Item and at Input

In your css:

.classA {
  display: flex;
  flex-direction: row;
}

.classB {
  margin-left: 10px;
}

In you html:

<Form
  layout="vertical"
  size="medium"
>
  <Form.Item
    name='input-name'
    label='input-label'
    className='classA '
  >
    <InputNumber className='classB' />
  </Form.Item>
</Form>

Upvotes: 0

Related Questions