Search code examples
reactjstabsreact-bootstrapreact-select

React-bootstrap Tabs shrinks tab content on interaction

I have a Tabs component which should render a container. Now, on interaction with the react-select form in that inner container, the container itself shrinks instead of keeping its size at 100% width. How can I achieve this?

This is the wrongful behavior:

enter image description here

This is the render method:

  <BackgroundContainer>
    <Container alignItems={'center'} flexDirection={'column'} width={'60%'}>
      <Tabs
        fill
        style={tabsStyle}
        id={'modeTabs'}
        transition={false}
        activeKey={this.state.mode}
        onSelect={k => {
          this.setState({mode: k});
        }}
      >
        <Tab eventKey={'schieber'} title={'Schieber'} style={tabStyle}>
          <TabWrapper>
            <SchieberCreator/>
          </TabWrapper>
        </Tab>
        <Tab eventKey={'coiffeur'} title={'Coiffeur'} style={tabStyle} disabled>
          <CoiffeurCreator/>
        </Tab>
        <Tab eventKey={'bieter'} title={'Bieter'} style={tabStyle} disabled>
          <BieterCreator/>
        </Tab>
        <Tab eventKey={'sidi'} title={'2er Sidi'} style={tabStyle} disabled>
          <SidiCreator/>
        </Tab>
      </Tabs>
    </Container>
  </BackgroundContainer>

styles and Wrapper component:

const tabsStyle = {
  backgroundColor: '#7F8385',
  borderTopRightRadius: '5px',
  borderTopLeftRadius: '5px',
  width: '94%',
  margin: 0,
  padding: 0,
};

const tabStyle = {
  width: '100%',
};

const TabWrapper = styled('div')({
  flex: 1,
  width: '100%',
  alignItems: 'stretch'
});
Solution

  • Making the wrapping such that align-items: stretch did the trick. Additionally, to keep the tabs bar centered, instead of utilizing align-items: center as previously, I set margin: 0 auto for the tabsStyle.