Why doesn't the Grid expand inside a Tab but would do so in other components?

[Omar]

I built this to show you what I'm talking about. Instead of the Grid expand to fill the Tab, instead the Tab expands to accommodate the Grid.

If you comment out line 22 and uncomment 23, you'll see that the Grid expand to fill the view and then a scrollbar for the Grid (not the entire view) will show up. But if you uncomment line 22 and comment out line 23, you'll see the opposite happening.

The same behavior can be observed by commenting/uncommenting lines 62 and 63.

https://codesandbox.io/p/sandbox/black-morning-kx4vpv

 

Thanks.

[Yanko]

Hi, Omar,

Thank you for the provided example.

Do I correctly understand that the requirement is for the Grid to be scrollable and to fit inside the TabStrip without expanding it more than the screen height, making the whole view scrollable? You can achieve this by applying `height: 100%` to the TabStrip, as it is with the Drawer. The only difference is that the height of the Drawer can be set through the `style` property, whereas for the TabStrip, you need to use the `className` property. I updated the provided sample to demonstrate this approach:

• https://codesandbox.io/p/sandbox/musing-napier-7mwnsv?file=%2Fapp%2Fapp.tsx%3A63%2C38 

Please review the above demo and let me know if it correctly displays the expected behaviour.

Regards,
Yanko
Progress Telerik

[Omar]

Thank you so much. I didn't know I could do that! Unfortunately, it seems like in my actual code it's not working. I think the BrowserRouter is perhaps affecting the layout.

Perhaps you can spot what I'm doing wrong? Here are the components from the child to parent. I'm not using any custom CSS or any CSS-in-JS.

<Table /> (Gird is inside <Table />)

    <Grid
      data={tableData}
      style={{ height: "100%" }}
      showNewButton
      content={createNewButton}
      editable={true}
      dataItemKey="id"
      editField={editField}
      edit={edit}
      onItemChange={onItemChange}
      onDataChange={onDataChange}
      pageSize={80}
      virtual={true}
    >

<Inventory />

  const tabStrips = tabs.map((tabName) => (
    <TabStripTab title={capitalizeFirstLetter(tabName)} key={tabName}>
      <Table
        tableName={tabName}
        data={data}
        togglePopup={togglePopup}
        isAdmin={isAdmin}
        refreshData={fetchData}
      />
    </TabStripTab>
  ));

  return (
    <>
        {isLoading ?
          <IsLoading />
        : <TabStrip
            selected={selected}
            onSelect={(e) => setSelected(e.selected)}
            className={"height-100"}
          >
            {tabStrips}
          </TabStrip>
        }

     {* another unrelated component *}
    </>
  );
}

 

<DrawerWithRoutes /> (where Inventory component gets called inside <Route>)

      <Drawer
        width={220}
        style={{
          height: "100%",
        }}
        mini={true}
        miniWidth={48}
        expanded={drawerExpanded}
        mode="push"
        items={drawerItems}
        item={CustomItem}
        onSelect={(e) =>
          onDrawerSelect(e, setOpenParents, setSelectedId, navigate)
        }
        onOverlayClick={() => setDrawerExpanded(false)}
      >

        <DrawerContent
          style={{
            height: "100%",
            backgroundColor: "var(--kendo-color-surface, #F5F5F5)",
          }}
        >
          <Routes>
            <Route
              path="/"
              element={<Navigate to={landingPath(roles)} replace />}
            />

            {ROUTES.filter((r) => canAccess(roles, r.allowed)).map((r) => (
              <Route key={r.path} path={r.path} element={r.element} />
            ))}

            <Route path="*" element={<p>404 - nothing here</p>} />
          </Routes>
        </DrawerContent>
      </Drawer>

 

<Shell />

  return (
    <DrawerWithRoutes
      roles={roles}
      onSignOut={() => instance.logoutPopup({ mainWindowRedirectUri: "/" })}
    />
  );

 

<App />

export default function App({ pca }: { pca: IPublicClientApplication }) {
  return (
    <MsalProvider instance={pca}>
      <BrowserRouter>
        <Shell />
      </BrowserRouter>
    </MsalProvider>
  );

 

Entire CSS file

@use "@progress/kendo-theme-default/dist/default-ocean-blue-a11y.scss" as *;

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: var(--kendo-font-family-sans-serif);
}

Thank you in advance!

[Yanko]

Hi, Omar,

Thank you for the provided code.

Can you please ensure the 100% width is applied to the TabStrip. In my example, I created a custom class in index.html for the purpose of the demo. In case you are using Tailwind or other utility classes, you can apply the respective class to set the 100% width. Alternatively, you can create your custom class that does so, as in my example:

            .height-100{
                height: 100%;
            }

I apologize if the use of this custom CSS class was not clearly exposed.