CODEWITHSUNDEEP
reactjsantd
kataba
kataba

Reputation: 170

Ant Design v4 broken layout when using Radio.Group

I upgraded my React project from Ant Design v3 to v4 and then all components that had radio groups had their layout broken. I could not see this breaking change mentioned anywhere in the documentation.

The problem now is that if there is parent Radio.Group element, the layout breaks with some column text not being displayed at all. Once the Radio.Group element is removed, the layout is fine as can be seen in the screenshots below and the code sandbox.

Is this a bug and how can I solve this?

https://codesandbox.io/s/sweet-frost-wp03h1?file=/src/App.js

Broken layout

Proper layout

Upvotes: 0

Views: 589

Answers (1)

topched
topched

Reputation: 775

Yeah ant doesnt really provide a good way to put the radio buttons inside the group on a grid layout. Here is what I usually do when you want to override the default sizing provided by the radio group (using your example)

  const QuestionRow = ({ questionIndex }) => (
    <Row>
      <Col xs={{ span: 5 }} lg={{ span: 6 }}>
        Question {questionIndex + 1}
      </Col>
      <Col xs={{ span: 19 }} lg={{ span: 18 }}>
        <Row>
          <Radio.Group style={{ width: "100%", display: "inline-flex" }}>
            <Col xs={{ span: 2, offset: 1 }} lg={{ span: 3, offset: 1 }}>
              <Radio value={1}>1</Radio>
            </Col>
            <Col xs={{ span: 2, offset: 1 }} lg={{ span: 3, offset: 1 }}>
              <Radio value={2}>2</Radio>
            </Col>
            <Col xs={{ span: 2, offset: 1 }} lg={{ span: 3, offset: 1 }}>
              <Radio value={3}>3</Radio>
            </Col>
            <Col xs={{ span: 2, offset: 1 }} lg={{ span: 3, offset: 1 }}>
              <Radio value={4}>4</Radio>
            </Col>
          </Radio.Group>
        </Row>
      </Col>
    </Row>
  );

Basically just end up creating a new Row inside the column you want the radio buttons and make sure the radio group flexes properly inside the area that you want it to display. Hope this helps.

Here is a link back to your code sandbox https://codesandbox.io/s/stoic-kowalevski-d9dqtj?file=/src/App.js

Upvotes: 1

Related Questions