How can I make sematic-ui-react Tab responsive?

Question

I'm developing a react application and I recently start to use semantic ui react module.

Unfortunately I'm not able to make the Tab object responsive...

A really simple script to show this is:

import React from 'react'
import { withRouter } from 'react-router-dom'

import {Tab} from 'semantic-ui-react';

// import NavSection from './NavSection'

var sections = ["SectionA","SectionB","SectionC","SectionD","SectionE","SectionF"]

const NavigatorHeader = () => (
<div>
  <h1>Navigator</h1>
  <div>
    <Tab menu={{ pointing: true }} panes={getPanes(sections)} />
  </div>
</div>
)

export default withRouter(NavigatorHeader)


function getPanes(sections){
  return sections.map( function(section){
    return {
      menuItem: section,
      render: () =>
        <Tab.Pane attacched="false">
          <div>
            <p>
            Some Text that we can change tab from tab. E.g. with the title: <b>{section}</b>
            </p>
          </div>
        </Tab.Pane>
    }
  })
}

The tabs look great, inline, but if I reduce the screen they just overflow, while I was expecting they would have moved to a second line.

Look like that this is coming from the Selenium-ui css I'm using (https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.3.1/semantic.min.css). Current version is 2.3.1 but if I go back to use a version before 2.0.0, it was responsive.. is there a way to obtain the same behavior with the new version?

Thanks, Michele. Thanks, Michele.

Answer 1

Based on the previous answer I found an easier way to achieve this.

I defined a CSS with the values suggested:

.wrapped{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

and then just passed that additional class to the menu

<Tab menu={{ pointing: true, className: "wrapped" }} panes={getPanes(sections)} />

That solved the problem without any additional javascript.