0

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

Dane
  • 9,242
  • 5
  • 33
  • 56
karolis2017
  • 2,195
  • 8
  • 24
  • 49

1 Answers1

1

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

Dane
  • 9,242
  • 5
  • 33
  • 56
  • thanks for this. Is there a way to make these menu tabs to be centred? now everything goes from the left. :) – karolis2017 Nov 01 '17 at 21:30
  • CSS buddy, CSS.. there are so many ways to horizontally center a `div`, like `margin: auto`. See https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css – Dane Nov 02 '17 at 03:29