Support Article
Text area control has no restriction over width, in Read-Only
SA-16347
Summary
Text area control has no restriction over width, in read-only format. To display a Text Area, for User input, user selected the option to 'size to Content' (for editable settings).
When the same section was called at another screen (in read-only format), the Text area did not have any control over width and had a width equivalent to the text entered. This resulted in horizontal scrollbar.
Error Messages
Not Applicable
Steps to Reproduce
1. Create a section which would include a text area and a Repeat Grid layout. The Grid layout would contain many text areas.
2. On the Presentation tab of each text area, select size to content.
3. Create another section which would call the section created initially, in Read Only mode.
Root Cause
When the user enters a paragraph in text area, then in read-only screen, it would appear as a single line. There is no restriction in width of text area when displayed in read-only mode.
Resolution
Before applying the code:
1. Run the use case.
2. Turn on the developer tool and use Inspect Element for the text area inside the dynamic layout. In below screenshot you can observe “div.field-item.dataValueRead”. Apply the style required on the same div tag.
3. Use Inspect Element for the text area of repeat grid. In the below screenshot you can observe the div class “oflowDivM”. Apply the style for this div tag.
Applying the code:
Add the below code in the User Work Form:
<Style>
div.field-item.dataValueRead
{
word-break: break-word;
}
div.oflowDivM
{
word-break: break-word;
}
</Style>
div.field-item.dataValueRead
{
word-break: break-word;
}
div.oflowDivM
{
word-break: break-word;
}
</Style>
Published January 31, 2016 - Updated October 8, 2020
Have a question? Get answers now.
Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.