1

I have this code in my react return statement with "react-bootstrap": "^0.32.1"

var Tabs = require('react-bootstrap/lib/Tabs');
var Tab = require('react-bootstrap/lib/Tab');
.....
  return (
    <Tabs placement='right' >
    <Tab ref="target1" eventKey={1} title="Tab 1">

    </Tab>
    <Tab target="target1" placement="bottom" eventKey={2} title="Tab 2">
    Tab 2 content
    </Tab>
    </Tabs>
    );

I'm trying to follow this guide in the docs: https://react-bootstrap.github.io/react-overlays/#position

The tabs appear on the left even though I have it marked right, and I can't get them to go top bottom. I must be missing a guide somewhere.

Any Ideas?

user269964
  • 159
  • 11
  • can you add your code to codesandbox and give a link? – iceveda06 Mar 03 '18 at 15:36
  • Do you have access to this? https://codesandbox.io/s/9zqr92r8wy I've never made a codesandbox. – user269964 Mar 03 '18 at 15:49
  • yes, i do have access – iceveda06 Mar 03 '18 at 15:57
  • Looks like you are using Overlays, have you tried wrapping your Tabs into and and offset it to the right? There is an example within 'Layout' section of the documentation. – iceveda06 Mar 03 '18 at 17:33
  • I tried with the layout eariler. The problem is I can't have something span a column. For instance, the tab would just have an open content, so it spans multiple columns. Unless I'm seeing it wrong. – user269964 Mar 03 '18 at 19:38
  • this will work: https://react-bootstrap.github.io/components/tabs/#tabs-custom-layout I just need to fit it in the window now :) – user269964 Mar 03 '18 at 19:46

0 Answers0