4

While working with ant design form, I have serious problem with responsiveness.

import { From, Input, Button } from 'antd'
const { Item } = Form;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const ExampleAntForm = () => {
{

   return (
      <Form {...layout}>
          <Item label="Name" name="username"> <Input type="text"/> </Item>
          <Item label="Password" name="password"> <Input type="password"/> </Item>
          <Item {...tailLayout}>
              <Button htmlType="submit" type="primary"> Submit </Button>
          </Item>
      </Form>
   )
}

But in this case, I'd like to apply layout depending on screen size.

Ideally like below,

const layout = {
   labelCol = { span: { sm: 24, md: 8, lg: 6 }}
   wrapperCol = { span: { sm: 24, md: 16, lg: 12 }}
}

How to approach this responsiveness using the layout props in ant design Form component? Orr just let me know any other potential solutions for my issue.

Josh Thomas
  • 1,607
  • 2
  • 8
  • 22

2 Answers2

8

We can modify layout like below

const layout = {
    labelCol: { xs: { span: 24 }, sm: { span: 12 }, md: { span: 8 }, lg: { span: 8 } },
    wrapperCol: { xs: { span: 24 }, sm: { span: 12 }, md: { span: 12 }, lg: { span: 12 } }
}
const tailLayout = {
    wrapperCol: { xs: { span: 24 }, sm: { span: 12, offset: 12 }, md: { span: 12, offset: 8 }, lg: { span: 12, offset: 8 } }
};
Josh Thomas
  • 1,607
  • 2
  • 8
  • 22
4

Use Ant Design predefined layout, it's helpful for making your form responsive automatically, Here is a link for more info https://ant.design/components/layout

IamMHC
  • 86
  • 4
  • thanks for your comment @lamMHC. Can you attach full code example? – Josh Thomas Nov 25 '20 at 01:18
  • 1
    Handle the layout by screen sizes like below const layout = { labelCol: { xs: { span: 24 }, sm: { span: 8 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 16 }, }, }; breakpoint width { xs: '480px', sm: '576px', md: '768px', lg: '992px', xl: '1200px', xxl: '1600px', } – IamMHC Nov 25 '20 at 01:24