0

 import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import Sonnet from '../../components/Sonnet'; function UncontrolledExample() { return ( <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3" > <Tab eventKey="home" title="Home"> </Tab> <Tab eventKey="profile" title="Profile"> </Tab> <Tab eventKey="contact" title="Contact" disabled> </Tab> </Tabs> ); } export default UncontrolledExample;

ul.mb-3.nav.nav-tabs { overflow-y: hidden; overflow-x: scroll; max-width: 40%; }

import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import Sonnet from '../../components/Sonnet'; function UncontrolledExample() { return ( <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example" className="mb-3" > <Tab eventKey="home" title="Home"> </Tab> <Tab eventKey="profile" title="Profile"> </Tab> <Tab eventKey="contact" title="Contact" disabled> </Tab> </Tabs> ); } export default UncontrolledExample;

I am using react-bootstrap/Tabs for dynamic Tabs with content. If Tabs are more than 6, then my requirement is to add horizontal scroll. Tried adding :

overflow-x: scroll; 
overflow-y: hidden;

It is adding a empty horizontal scrollbar.

to get horizontal scrollbar for tabs.

Seema
  • 1
  • 1
  • Post whta have you tried(code). – SinisaM Dec 29 '22 at 09:47
  • @SinisaM import Tab from 'react-bootstrap/Tab'; import Tabs from 'react-bootstrap/Tabs'; import Sonnet from '../../components/Sonnet'; function UncontrolledExample() { return ( ); } export default UncontrolledExample; – Seema Dec 29 '22 at 13:41
  • ul.mb-3.nav.nav-tabs { overflow-y: hidden; overflow-x: scroll; max-width: 40%; } – Seema Dec 29 '22 at 13:42
  • Contact4 is coming in next line.. my requirement is to have scrollbar below tabs – Seema Dec 29 '22 at 13:43
  • is there any option to add slider with 6 slides to show at a time instead of scrollabar ? – Seema Dec 30 '22 at 06:11
  • Please [edit] your post, don't put essential info in comments – mousetail Jan 01 '23 at 13:12

1 Answers1

0

I am using this

Tabcontainer and navs as Tab

give style to Navs tag overflow:'auto', display:'flex, flex-wrap:nowrap

    function BasicExample() {
  return (
    <>
      <Tab.Container defaultActiveKey={1} mountOnEnter={true} onSelect={(e) => setActive({ [e]: activeTabClasses })}>
      <Nav variant="tabs" style={{overflow:'auto'}} className=" d-flex flex-nowrap flex-row mt-2" justify>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={1} >Inspections</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={2}>Accessories</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={3}>People</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={4}>Activity</Nav.Link>
        </Nav.Item>
        <Nav.Item className='d-flex  flex-column'>
          <Nav.Link eventKey={5}>Documents</Nav.Link>
        </Nav.Item>
      </Nav>
      <Tab.Content className='d-flex flex-column flex-grow-1'>
        <Tab.Pane eventKey={1} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={2} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={3} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={4} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
        <Tab.Pane eventKey={5} className={`d-flex flex-column flex-grow-1`}>
          <div>Inspections</div>
        </Tab.Pane>
      </Tab.Content>
    </Tab.Container>
    </>
  );
}

export default BasicExample;
NAZIR HUSSAIN
  • 578
  • 1
  • 18