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

Question

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.

Answer 1

I removed parent <Form.Item> and set the label in addonBefore={"TestLabel"} in <Input/> which aligned label and <Input> horizontally. Here's the updated code.

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

Answer 2

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>

Answer 3

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>