CODEWITHSUNDEEP
cssreactjsantd
karolis2017
karolis2017

Reputation: 2415

how to separate a menu and menu tab content width in 'Ant Design'?

I want to have my menu width <Col span={6} offset={8}> and my content <Col span={10} offset={7}>. How do I do that?

  <Row>
    <Col span={6} offset={8}>
    <Tabs defaultActiveKey="2" >
      <TabPane tab="About" key="1"><About /></TabPane>
      <TabPane tab="My Projects" key="2"><MyProjects /></TabPane>
      <TabPane tab="Contact" key="3"><Contact /></TabPane>
    </Tabs>
    </Col>
  </Row>

This code smashes everything in span={6}

enter image description here

Upvotes: 0

Views: 2286

Answers (1)

Dane
Dane

Reputation: 9542

This solution is tricky. When the TabPane component is rendered, it contains lots of divs. The idea is to pick the div corresponding to the tab nav bar and apply ant-col-6 class to it. Upon inspecting, you can get the required classes.

Add the following line of code to your component:

let navBar = document.getElementsByClassName('ant-tabs-bar')[0];
navBar.className += ' ant-col-15';
console.log(navBar)

To know why ant-col-15, if you need a span of 6, you have to give 6/10 *24 = 15

See my pen: https://codepen.io/danegit/pen/XzbLWL
Play with it until u get expected result

Upvotes: 1

Related Questions