Word Break in Error message

User Experience
, , ,
1

Need to break the error message by word instead character.

Table Layout is configured with “Expandable rows” and validation is being triggered with Property-Set-Message on click of Save button .

Error.jpg
Error.jpg353×217 8.33 KB

I would like to check if there is a way to fix it using OOTB instead of overriding the below CSS tag in custom Skin rule .

.gridTable .iconErrorDiv .iconError {

word-break: normal;}

2

@Brahmesh@

:warning: This is a GenAI-powered tool. All generated answers require validation against the provided references.

Based on my investigation, the CSS property word-break: normal is indeed the proper setting to ensure text breaks at word boundaries rather than characters. The current behavior you’re experiencing is likely due to the default CSS in the grid error messages which might be using word-break: break-all (which breaks text at any character).

Unfortunately, I couldn’t find an out-of-the-box configuration option in Pega to control this specific text wrapping behavior without CSS customization. The standard UI components in Pega don’t expose word-break settings through pySettings or other configuration options for error messages in Table Layouts specifically.

Your approach of modifying the CSS is correct:

.gridTable .iconErrorDiv .iconError { word-break: normal; }

If you want to avoid custom Skin rules, you could consider these alternatives:

  1. Inline Style Override: If this is for a specific instance, you could add a Section Include with an HTML fragment that applies this style directly to the page where this Table Layout appears.
  2. Dynamic CSS: Create a CSS Text File rule and include it in your application’s HTML via a Section Include, which would avoid modifying the Skin directly.
  3. Contact Pega Support: Since this appears to be a default styling choice that affects usability, you might want to submit this as a feature request for future platform versions to include a configuration option for error message word breaking.

So this particular style customization does appear to require CSS modification.

References: