Search code examples
reactjsbootstrap-4antd

Antd responsive Input does work when screen size is "xs"

I'm using react + Antd. I'm trying to make my input field the same size no matter how large is the screen.

Everything works fine when the screen size is "sm" (>= 576px). enter image description here

However, it will automatically change to this when the screen size is "xs"(<576px). Even though I set labelCol = {{span: 12}} wrapperCol={{span:12}}, The label and input field are not at the same line and the width of input is definitely not 12 in this case. enter image description here

This is my code, I'm not sure if this is a bug in antd or my understanding to breakpoint is wrong.

    <Row>
      <Col sm={{span: 12, offset: 6}}>
        <ProFormText 
          name="name" 
          label="Username" 
          labelCol={{span: 12}}
          wrapperCol={{span: 12}}
        />
      </Col>
    </Row>

Because the responsive design in antd follows bootstrap 4, I also tagged "bootstrap 4"

[EDIT] CodeSandBox: https://codesandbox.io/s/basic-usage-antd-5-8-4-forked-6sntlk?file=/demo.tsx

This is when the size of screen is "md" enter image description here This is what will happen when the screen size changes to "sm: enter image description here

Solution

  • This was a bug in antd, it had been solved https://github.com/ant-design/ant-design/issues/44386