Semantic UI React: How to make Tab menu use full width of container?

Question

I have a component that uses Semantic UI Tab with only two (2) menu options. My problem is, how to wrap the 2 options to take advantage of the full width of its container.

Kindly see picture below for reference:

I want "Calendar" and "To-Do List" use 50% each of the width.

I use the code in their sample as below:

      const panes = [{
                menuItem: 'Calendar',
                render: () => <Tab.Pane attached={false}><EventList /></Tab.Pane>
              },
              {
                menuItem: 'To-Do List',
                render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>
              }
            ]
      return <Tab
          menu={{ attached: false }}
          panes={panes}
        />

Aishah Sofea · Accepted Answer · 2021-08-22 07:07:09Z

1

You have to specify the number of panes in menu widths.

<Tab menu={{ widths: panes.length}} />

answered Aug 22, 2021 at 7:07

Aishah Sofea

911 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

charunda sanpunya · Accepted Answer · 2020-05-13 16:19:45Z

0

I think the width of a tab is depends on content of each tab So I use 'Step' instead. Use this as Tab menu cuz it easier to make it equal. https://react.semantic-ui.com/elements/step/

enter image description here

answered May 13, 2020 at 16:19

charunda sanpunya

212 bronze badges

Collectives™ on Stack Overflow

Semantic UI React: How to make Tab menu use full width of container?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related