topic Help with text overflow in Select component for long CIIU options in CMS Development

Help with text overflow in Select component for long CIIU options

NelsonS — Thu, 13 Feb 2025 05:32:12 GMT

👋 Hey team! Need some help with text overflow in a Select component

Current Behavior:
- Using a Select component from [library name] for CIIU options
- Long option labels are causing overflow issues despite using overflow and word break properties

Current Implementation:
<Select
label="CIIU a suscribir"
placeholder="Seleccione CIIU"
value={ciiu}
onChange={(value) => setCiiu(value)}
required={true}
options={ciiuOptions} />

Re: Help with text overflow in Select component for long CIIU options

BérangèreL — Tue, 18 Feb 2025 08:04:31 GMT

Hi @NelsonS, I hope that you are well!

Thanks for asking the HubSpot Community!

I'd love to put you in touch with some of our Top Experts: Hi @sylvain_tirreau, @zach_threadint and @Bortami do you have suggestions to help @NelsonS, please?

Have a great day and thanks so much! ⭐

Best,
Bérangère

Re: Help with text overflow in Select component for long CIIU options

Bortami — Wed, 19 Feb 2025 17:55:59 GMT

Hi @NelsonS,

The dropdown width is set by your longest label in the options array. The component doesn't offer wordbreak or overflow options. (https://developers.hubspot.com/docs/reference/ui-components/standard-components/select)

You may want to truncate the labels in the array to a consistent length before passing the array to the component.

//truncating function const truncateLabels = (options) => { return options.map(item => ({ ...item, label: item.label.length > 10 ? item.label.slice(0, 10) + '...' : item.label })); }; // Sample input array const inputArray = [ { label: "really long label name", value: "really long value" }, { label: "short", value: "short value" }, { label: "another long label", value: "another long value" } ]; //Sample output array const outputArray = [ { label: "really lon...", value: "really long value" }, { label: "short", value: "short value" }, { label: "another lo...", value: "another long value" } ]