"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";
1 Answer, 1 is accepted
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:
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
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
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..
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:
If any specific questions arise, please do not hesitate to contact us again.
Rank 2
Iron
Iron
Iron
Rank 2
Iron
Iron
Iron
Hi Tejas,
I have created an example with a header/main/footer layout:
Note that the styles for the class names is within the "styles.css" file.
Hope this helps.