The 'headline' `<h3 id="headline"></h3>` of a component inside of the BlockGridEditor does not wrap if its too long

Hello,

I have added a component to the BlockGridEditor and am using syntax in the Label property of the component configuration to display, for example. the ‘Title’, ‘Sub Title’ ‘Name’ properties (if they are populated)

This all works fine.

However when I go to add this component to a content item and populate the field

The <h3 id="headline"> does not wrap the text and thus I end up with the below.
image

Does anyone know how i can fix this or raise a bug somewhere?

Hi @charlesa-ccs

There’s a truncate and word limit UFM filter:

Something like this may work for you, although your ternary logic may be problematic so you would need to test it:

Accordion - ${ componentName ? (componentName | truncate:40:...) : '' }${ componentName && heading ? ' - ' : '' }${ heading ? (heading | truncate:40:...) : '' }

A more basic example would be:

Accordion - {umbValue: componentName | truncate:40:...} {umbValue: heading | truncate:40:...}

I can’t see the overflow listed as an issue, but feel free to raise it here:

Justin

Thanks @justin-nevitech I would prefer not to fix the issue by truncating the text, but its a very good idea :smiley: . I will raise the issue using the link

@justin-nevitech I cannot create an issue there because issue creation is restricted :confused:

Hi @charlesa-ccs

Odd - are you logged into GitHub?

No reason why you shouldn’t be able to raise an issue…

Justin

ahhh I am not logged in :woman_facepalming: