{"id":751,"date":"2025-06-25T10:59:14","date_gmt":"2025-06-25T10:59:14","guid":{"rendered":"http:\/\/gogetmuscle.com\/?p=751"},"modified":"2025-06-25T17:44:55","modified_gmt":"2025-06-25T17:44:55","slug":"scrolling-box-in-hubspot-ui-extensions","status":"publish","type":"post","link":"http:\/\/gogetmuscle.com\/index.php\/2025\/06\/25\/scrolling-box-in-hubspot-ui-extensions\/","title":{"rendered":"scrolling Box in @hubspot\/ui-extensions"},"content":{"rendered":"

hii guys<\/P>

Thanks in advance<\/P>

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 \u2014 could you please review it, correct any issues, and guide me on how to achieve the desired scroll functionality?<\/P>

\u00a0<\/P>

import<\/SPAN> React<\/SPAN>, { <\/SPAN>useState<\/SPAN> } <\/SPAN>from<\/SPAN> ‘react’<\/SPAN>;<\/SPAN><\/DIV>
import<\/SPAN> {<\/SPAN><\/DIV>
\u00a0 <\/SPAN>Button<\/SPAN>,<\/SPAN><\/DIV>
\u00a0 <\/SPAN>Modal<\/SPAN>,<\/SPAN><\/DIV>
\u00a0 <\/SPAN>ModalBody<\/SPAN>,<\/SPAN><\/DIV>
\u00a0 <\/SPAN>Text<\/SPAN>,<\/SPAN><\/DIV>
\u00a0 <\/SPAN>Box<\/SPAN>,<\/SPAN><\/DIV>
\u00a0 <\/SPAN>Flex<\/SPAN>,<\/SPAN><\/DIV>
\u00a0 <\/SPAN>hubspot<\/SPAN>,<\/SPAN><\/DIV>
} <\/SPAN>from<\/SPAN> ‘@hubspot\/ui-extensions’<\/SPAN>;<\/SPAN><\/DIV>
hubspot<\/SPAN>.<\/SPAN>extend<\/SPAN>(() <\/SPAN>=><\/SPAN> <<\/SPAN>Extension<\/SPAN> \/><\/SPAN>);<\/SPAN><\/DIV>
const<\/SPAN> Extension<\/SPAN> =<\/SPAN> () <\/SPAN>=><\/SPAN> {<\/SPAN><\/DIV>
\u00a0 <\/SPAN>return<\/SPAN> (<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN><<\/SPAN>Button<\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 <\/SPAN>overlay<\/SPAN>=<\/SPAN>{<\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 \u00a0 <\/SPAN><<\/SPAN>Modal<\/SPAN> id<\/SPAN>=<\/SPAN>“scroll-modal”<\/SPAN> title<\/SPAN>=<\/SPAN>“Scrollable List”<\/SPAN> width<\/SPAN>=<\/SPAN>“md”<\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 \u00a0 <\/SPAN><<\/SPAN>ModalBody<\/SPAN>><\/SPAN><\/DIV>
\u00a0 <\/SPAN><<\/SPAN>Box<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN>direction<\/SPAN>=<\/SPAN>“column”<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN>height<\/SPAN>=<\/SPAN>“400px”<\/SPAN> \u00a0 \u00a0 \u00a0 \u00a0 \u00a0<\/SPAN>\/\/ \u2705<\/span> Limit height of scrollable container<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN>overflow<\/SPAN>=<\/SPAN>“auto”<\/SPAN> \u00a0 \u00a0 \u00a0 \u00a0 <\/SPAN>\/\/ \u2705<\/span> Enable scroll<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN>padding<\/SPAN>=<\/SPAN>“sm”<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN>gap<\/SPAN>=<\/SPAN>“sm”<\/SPAN><\/DIV>
\u00a0 <\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN><<\/SPAN>ScrollableList<\/SPAN> \/><\/SPAN><\/DIV>
\u00a0 <\/SPAN><\/<\/SPAN>Box<\/SPAN>><\/SPAN><\/DIV>
<\/<\/SPAN>ModalBody<\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 \u00a0 <\/SPAN><\/<\/SPAN>Modal<\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 <\/SPAN>}<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 Open Scrollable Modal<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN><\/<\/SPAN>Button<\/SPAN>><\/SPAN><\/DIV>
\u00a0 );<\/SPAN><\/DIV>
};<\/SPAN><\/DIV>
const<\/SPAN> ScrollableList<\/SPAN> =<\/SPAN> () <\/SPAN>=><\/SPAN> {<\/SPAN><\/DIV>
\u00a0 <\/SPAN>return<\/SPAN> (<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN><<\/SPAN>Box<\/SPAN> direction<\/SPAN>=<\/SPAN>“column”<\/SPAN> gap<\/SPAN>=<\/SPAN>“xs”<\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 <\/SPAN>{<\/SPAN>Array<\/SPAN>.<\/SPAN>from<\/SPAN>({ <\/SPAN>length<\/SPAN>:<\/SPAN> 100<\/SPAN> }).<\/SPAN>map<\/SPAN>((<\/SPAN>_<\/SPAN>, <\/SPAN>i<\/SPAN>) <\/SPAN>=><\/SPAN> (<\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 \u00a0 <\/SPAN><<\/SPAN>Box<\/SPAN> key<\/SPAN>=<\/SPAN>{<\/SPAN>i<\/SPAN>}<\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/SPAN><<\/SPAN>Text<\/SPAN>><\/SPAN>Item <\/SPAN>{<\/SPAN>i<\/SPAN> + <\/SPAN>1<\/SPAN>}<\/SPAN><\/<\/SPAN>Text<\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 \u00a0 <\/SPAN><\/<\/SPAN>Box<\/SPAN>><\/SPAN><\/DIV>
\u00a0 \u00a0 \u00a0 ))<\/SPAN>}<\/SPAN><\/DIV>
\u00a0 \u00a0 <\/SPAN><\/<\/SPAN>Box<\/SPAN>><\/SPAN><\/DIV>
\u00a0 );<\/SPAN><\/DIV>
};<\/SPAN><\/DIV>

<\/DIV><\/p>\n","protected":false},"excerpt":{"rendered":"

hii guysThanks in advanceI 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 \u2014 could you please review it, correct any issues, and guide me on how to achieve the desired scroll functionality?\u00a0import React, { useState } from […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[14],"tags":[],"_links":{"self":[{"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/posts\/751"}],"collection":[{"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/comments?post=751"}],"version-history":[{"count":1,"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/posts\/751\/revisions"}],"predecessor-version":[{"id":752,"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/posts\/751\/revisions\/752"}],"wp:attachment":[{"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/media?parent=751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/categories?post=751"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gogetmuscle.com\/index.php\/wp-json\/wp\/v2\/tags?post=751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}