the content inside the drawer is not responsive.

[Tejas]

"Currently, I am using a drawer, but the issue is that the content inside the drawer is not responsive. I am attempting to create a wrapper for the content within the page, but I'm encountering difficulties with the CSS not functioning as expected. Could you kindly suggest an appropriate method for designing a responsive page?

========================================================================================

 "I am currently using a wrapper for sharing my code, for example."<wrapper direction="column">

<row>

<div> my page code </div>

<row>

</wrapper>

==============================================================================================

import React, { ReactNode } from "react";

import styled from "styled-components";

interface WrapperOptions {

  children: ReactNode;

  direction?: "row" | "column";

}

const StyledWrapper = styled.div<{ direction?: string }>`

  background-color: #ffffff;

  width: 100%;

  height: 100vh;

  display: flex;

  overflow: auto;

  flex-direction: ${({ direction }) => direction};

`;

function Wrapper({ children, direction }: WrapperOptions) {

  return (

    <StyledWrapper direction={direction}>

      {children}

    </StyledWrapper>

  );

}

export { Wrapper };

[Konstantin Dikov]

Hi Tejas,

The content of the Drawer is provided by the developer, so it would not be possible to have internal logic for responsive layout. Note that the content is rendered within the available space:

• https://stackblitz.com/edit/react-ulpcq5?file=app%2Fmain.jsx

If you have any particular issue with the Drawer (not reproducible outside of the Drawer component), please share a stackblitz example demonstrating the problem, so we can test and debug it locally and see if we can suggest a solution for it.

 

Regards,
Konstantin Dikov
Progress Telerik

[Tejas]

Inside the drawer, a grid is used to display data. However, when the screen size of the device changes, the grid is not displayed perfectly.

[Tejas]

Now i am share  a link : -https://stackblitz.com/edit/react-ulpcq5-q8nho8?file=app%2FInbox.jsx use can check a indox  and Favourites page.. 

[Konstantin Dikov]

Hi Tejas,

Thank you for providing an example.

Nevertheless, I have checked the "Favourites" page and changing the window size changes the width of the Grid as expected. If you want to keep all of the columns visible if the screen gets smaller, you can set explicit width to the Grid (or a min-width), so that the Grid can show a scrollbar if it gets below specific width. Additionally, since one of the columns has explicit width, you might consider adding such to all of the columns, which will also force a scrollbar if the wrapping container of the Grid is smaller than the sum of the width of all columns.

More information about columns' width can be found in the following help article:

• https://www.telerik.com/kendo-react-ui/components/grid/columns/width/

If any specific questions arise, please do not hesitate to contact us again.

 

[Tejas]

I have an image to share that demonstrates how to create a fixed drawer within a content page, allowing the content inside the page to be scrolled. Even with additional data added, the drawer remains in a fixed position. Importantly, only the content within the drawer is scrollable, while the overall page scrolling is unaffected.

[Tejas]

I am try to  this css.. but my footer is not to be show.. 

.k-drawer-container {

  position: fixed;

  width: 100%;

  height: 100vh;

}

[Konstantin Dikov]

Hi Tejas,

I have created an example with a header/main/footer layout:

• https://stackblitz.com/edit/react-39y49a-93ss3b?file=app%2FDrawerRouterContainer.jsx,app%2Fstyles.css

Note that the styles for the class names is within the "styles.css" file.

Hope this helps.