TabPanel styling as display block

Forge Forge UI Kit and Custom UI
1

I would like to expand the TabPanel from Tabs Element to full width, but cannot find a solution how to make it.

image
image1570×143 36.9 KB

the simple way to make it, is to set { display : block }, but style attribute seems to have no affect.

image
image242×132 1.69 KB

the code itself is simple too

        <TabPanel padding="space.300" style={{display: 'block !important'}} grow='fill'>
          <Form style={{display: "block !important"}} grow='fill'>
          <FormHeader title="Nachforschung Einleiten">
            Pflichtferlder sind mit dem Sternzeichen markiert
          <RequiredAsterisk />
          </FormHeader>

do anyone

2

To set styles in the UI Kit you need xcss function, but that works only on the Box component.

So you have to wrap you TabPanel in a Box, it should look something like this

import {  xcss } from '@forge/react';
<Box xcss={xcss({ display: 'block' })}>
        <TabPanel grow='fill'>
          <Form style={{display: "block !important"}} grow='fill'>
          <FormHeader title="Nachforschung Einleiten">
            Pflichtferlder sind mit dem Sternzeichen markiert
          <RequiredAsterisk />
          </FormHeader>
</Box>
3

Hi @RomanKern , you can expand the full width by wrapping your contents in a TabPanel with a Box component and setting the width to 100%

Here is an example:

const contentStyle = xcss({width: '100%', paddingTop: 'space.500'});

const App = () => (
<>
  <Tabs>
    <TabList>
      <Tab>Tab 1</Tab>
      <Tab>Tab 2</Tab>
      <Tab>Tab 3</Tab>
    </TabList>
    <TabPanel>
      <Box xcss={contentStyle}>
        This is the content area of the first tab.
      </Box>
    </TabPanel>
    <TabPanel>
      <Box padding="space.300">
        This is the content area of the second tab.
      </Box>
    </TabPanel>
    <TabPanel>
      <Box padding="space.300">
        This is the content area of the third tab.
      </Box>
    </TabPanel>
  </Tabs>
</>
);

image
image554×341 18.3 KB

4

nice, it works

<Box xcss={{width: ‘100%’}}>
is enough too