SA-23801

Summary

Text Area field is not giving the option of Wrap text inside Dynamic Inline Grid Triple layout and therefore the entire content is not visible when the Text Area field is rendered in read only mode. 
Issue is specific to Internet Explorer and Firefox browsers. In Chrome browser, the entire content is visible. 

Error Messages

Not applicable.

Steps to Reproduce

1. In a section, add a dynamic layout inline grid triple.
2. Add a Text area control field. Make sure the field is Editable.
2. Do a Save As of the above section, and this time make the same field Read-Only.
3. Create respective flow action rules for each section, and in the flow, place the flow action in this order - Editable Text Area FA followed by Read Only Text Area FA
4. At runtime, in the (editable) Text Area field enter a huge value- such that a scrollbar appears within the control field.

    

Submit the form , and observe that when the Text Area field is in Read Only mode, the content is cut short and is not wrapped inside the control field. Issue is specific to Internet Explorer and Firefox browsers.
In Chrome, the entire content is visible. 

Screenshots from Internet Explorer (works incorrectly):

    

Screenshots from Firefox (works incorrectly):

    


Screenshots from Chrome (works correctly):

    
 

Root Cause

Different browsers render overflow-wrap css attribute differently.

    -> In Chrome when the field-item is greater than span, overflow-wrap: break-word; is initialized to the Text Area field element, and therefore, the entire content is visible.          



    -> In Firefox or IE when the field-item is greater than span, overflow-wrap: break-word; is not initialized to the Text Area element, and therefore, the content is not word-wrapped. 

        

Resolution

Perform the following local-change: 

    1. Create a new section (in the same ruleset version where the main section containing the Text Area control is present). Traverse to HTML tab, and uncheck Auto-generated HTML option.

    2. Enter the following code in the HTML source - 

         <style>
                .field-item {
                    overflow-wrap: break-word;
                    word-break:break-all;
                }
        </style>   

        

    3. Save the section, and add it to the main section, where the Text Area control is present. Example -