topic Re: css not working and how to add height and overflow in BOX component in CMS Development

css not working and how to add height and overflow in BOX component

SagarTomar — Fri, 04 Jul 2025 10:12:57 GMT

{messages.map((msg, idx) => (

{msg.from === 'user' ? (

{msg.text}

</Alert>

) : (

{msg.text}

</Alert>

)}

{msg.timestamp && (

{msg.timestamp}

</Text>

)}

</Flex>

))}

</Box>

thank you in advance

i want to add custome style in box component how to do that.currently it is not working

Re: css not working and how to add height and overflow in BOX component

Victor_Becerra — Fri, 04 Jul 2025 16:26:59 GMT

Hi @SagarTomar ,

Thank you for reaching out to the Community!

I wanted to invite our subject matter experts to this conversation.

Hi @Anton @Bortami @GRajput - Do you have any advice for @SagarTomar ? Thank you!

Best,

Re: css not working and how to add height and overflow in BOX component

ArisudanTiwari — Mon, 07 Jul 2025 05:52:40 GMT

Hi @SagarTomar ,
HubSpot’s UI extensions use Emotion (CSS‑in‑JS), so the style prop doesn’t always work the way it does in standard React. Use the css prop (or a class) instead:

<Box
direction="column"
css={{
height: '200px',
overflow: 'auto',
}}
>
{messages.map((msg, idx) => (
<Flex
key={idx}
direction="column"
align={msg.from === 'user' ? 'end' : 'start'}
gap="medium"
>
{msg.from === 'user' ? (
<Alert variant="success">{msg.text}</Alert>
) : (
<Alert variant="tip">{msg.text}</Alert>
)}

{msg.timestamp && (
<Text variant="microcopy" color="neutral">
{msg.timestamp}
</Text>
)}
</Flex>
))}
</Box>

Quick sanity check - Wrap the Box in a plain div and apply the styles there. If the div scrolls correctly, the issue is specific to the Box component:
<div style={{ height: '200px', overflowY: 'auto', border: '1px solid gray' }}>
<Box direction="column">...…</Box>
</div>

If the plain div works but the Box doesn’t, check the Box‑component docs (or let us know which UI library you’re using) so the community can offer more targeted help.

Hope this points you in the right direction!

Re: css not working and how to add height and overflow in BOX component

SagarTomar — Mon, 07 Jul 2025 06:18:16 GMT

i am using this @hubspot/ui-extensions

Re: css not working and how to add height and overflow in BOX component

SagarTomar — Tue, 08 Jul 2025 05:42:58 GMT

The <div> element is not working as expected in @hubspot/ui-extension. I want to create a box component with a fixed height and enable vertical scrolling (overflow). Could you please guide me on how to achieve this using the supported components or styling options within the HubSpot UI Extension framework?