CODEWITHSUNDEEP
cssreactjsflexboxheightantd
Freddy.
Freddy.

Reputation: 1745

AntDesign TabPane min-height 100%

Using Ant.Design Tabs https://ant.design/components/tabs/

How can I set styling on TabPane so that it's min-height is always 100% height of the window even when it's empty?

Below example should cover the window with color #F5F5F5

Edit epic-flower-tg0g3

Upvotes: 3

Views: 5794

Answers (3)

Sanan Ali
Sanan Ali

Reputation: 3407

None of the above solution worked for me as I didn't want to set the height to full screen. I wanted the tabs having full available height. So, I had to override some of the ant-design classes and make sure every div has display:flex and flex:1 property.

Here is what I wrote to override the classes with tailwindcss.

.ant-tabs {
  height: 100%;
}
.ant-tabs-tabpane-active {
  height: 100%;
}
.ant-tabs-content-holder {
  display: flex;
}
 <Tabs
            defaultActiveKey={currentTab}
            tabBarStyle={{ display: "flex", justifyContent: "center" }}
            activeKey={currentTab}
            onChange={onTabChange}
            items={[
              {
                key: "members",
                label: "Members",
                children: <GroupMembers />,
              },
              {
                key: "permissions",
                label: "Permissions",
                children: <GroupPermissions />,
              },
              {
                key: "billings",
                label: "Billings",
                children: <Billing />,
              },
            ]}
          />

Upvotes: 0

Felipe Lima
Felipe Lima

Reputation: 29

So this has worked for me too

   <Tabs
      onChange={() => {
      console.log("oi");
      }}
      type="card"
      style={{ background: "blue", height: "100%" }}
   >
   <TabPane
      tab="Tab 1"
      key="1"
      style={{ minHeight: "100vh", background: "red" }}
   >
      Content of Tab Pane 1
   </TabPane>
 </Tabs>

Upvotes: 0

Freddy.
Freddy.

Reputation: 1745

This has worked for me.

<TabPane tab={tab.title} key={index}>
<Row>
  <Col style={{minHeight: "100vh", maxheight: "100vh"}}>
   Test
  </Col>
</Row>
</TabPane>

Upvotes: 1

Related Questions