hii guys
Thanks in advance
I am creating a box that contains multiple data sets. I want the content inside the box to be scrollable. I have attached my code for reference — could you please review it, correct any issues, and guide me on how to achieve the desired scroll functionality?
import React, { useState } from ‘react’;
import {
Button,
Modal,
ModalBody,
Text,
Box,
Flex,
hubspot,
} from ‘@hubspot/ui-extensions’;
hubspot.extend(() => <Extension />);
const Extension = () => {
return (
<Button
overlay={
<Modal id=“scroll-modal” title=“Scrollable List” width=“md”>
<ModalBody>
<Box
direction=“column”
height=“400px” // 
Limit height of scrollable container
overflow=“auto” // Enable scroll
padding=“sm”
gap=“sm”
>
<ScrollableList />
</Box>
</ModalBody>
</Modal>
}
>
Open Scrollable Modal
</Button>
);
};
const ScrollableList = () => {
return (
<Box direction=“column” gap=“xs”>
{Array.from({ length: 100 }).map((_, i) => (
<Box key={i}>
<Text>Item {i + 1}</Text>
</Box>
))}
</Box>
);
};
Hello,
Here are some suggestions that I have to help the code work better:
Change Reason
| Remove unused imports (useState, Flex) |
Keeps bundle lean and ESLint quiet. |
| Wrap scroll area with css={{ maxHeight, overflowY }} |
The Box component already renders a flex container, so adding overflow via the css prop is the cleanest way to enable scrolling. (You can still use the overflow prop if you prefer, but inline CSS lets you target only the Y-axis.) |
| Use flexDirection instead of direction |
It’s the documented prop name for controlling axis in the UI-Extensions Box component. |
| Split the modal into ScrollableModal (launcher) & ScrollableContent (overlay) |
Improves readability and makes it easier to test the overlay in isolation. |
| Add semantic key in ItemList |
React best practice to avoid console warnings and diff issues. |
| Change height → maxHeight |
Keeps the Box from stretching the modal when content is shorter than 400 px, but still clamps height when the list grows. |
Tips for further refinement
- Need both axes? Replace overflowY: ‘auto’ with overflow: ‘auto’.
- If you expect mobile use, swap the hard-coded 400px for 30vh (30 % of viewport height) or a CSS clamp, e.g.: maxHeight: ‘clamp(250px, 40vh, 500px)’.
- Give the Button a more descriptive label if you’ll have multiple in a page (e.g., “View items”).
Let me know if this helps, or if you have any other questions!
Was I able to help answer your question? Help the community by marking it as a solution.
Hey @sagar_tomar1,
Try to use style={{ maxHeight: ‘400px’, overflowY: ‘auto’ }} instead of height and overflow props.
<Box
direction="column"
style={{ maxHeight: '400px', overflowY: 'auto' }}
padding="sm"
gap="sm"
>
<ScrollableList />
</Box>
Refer: Accounts Dashboard | HubSpot
Hope this will help!
Regards,
