CODEWITHSUNDEEP
cssreactjschakra-ui
Raheem
Raheem

Reputation: 33

How to increase Chakra-UI Tabs/ TabsPanel width?

Chakra-UI's <Tabs /> and <TabPanels /> minimizes the with of the content within, thus throwing off the layout. This is a screenshot of the layout I'm using. I've removed the data and added colors to the <Cards /> so you can better visualize what I'm referring to.

enter image description here

I am using a custom Card, see

    <Box
      w={"full"}
      color={color || ""}
      bg={useColorModeValue(bg, bg) || useColorModeValue("white", "white")}
      boxShadow={"1xl"}
      rounded={"md"}
      overflow={"hidden"}
    >
      <Stack textAlign={"left"} p={6} align={"left"}>
        {props.children}
      </Stack>
    </Box>

How can I increase the width of the card colored in cyan using CSS so the better align with the others? Should the styling be applied to the TabPanel /> itself of the <Card />

A partial solution

I've come across this particular CSS code that I mostly use in my Bootstrap projects which basically allows me to break out of a container and set the width to full size of the screen, but this would make the <Card /> wider than the others.

.break-container {
   width: 100vw !important;
   position: relative !important;
   left: calc(-1 * (100vw - 100%) / 2);
}

Upvotes: 1

Views: 2587

Answers (2)

Hugo
Hugo

Reputation: 141

Simply adjust the horizontal padding of the TabPanel elements

  <TabPanels>
    <TabPanel px={0}>
      <p>one!</p>
    </TabPanel>
    <TabPanel px={0}>
      <p>two!</p>
    </TabPanel>
    <TabPanel px={0}>
      <p>three!</p>
    </TabPanel>
  </TabPanels>

You can also define it globally within the theme object:

const theme = extendTheme({
  components: {
    Tabs: {
      defaultProps: {
        variant: "soft-rounded"
      },
      variants: {
        "soft-rounded": {
          tabpanel: {
            px: 0
          }
        }
      }
    }
  }
});

Upvotes: 3

Matin Vilan
Matin Vilan

Reputation: 1

please try (sx) in your code to customize your cahkra-ui’s elements!

Upvotes: 0

Related Questions