English

How To: Enable text wrapping in an infoWindow comment text box

Summary

There are two common attributes of a text box type in Web AppBuilder for ArcGIS, namely Single Line and Multiple Line. These two types of text boxes are represented as TextBox and TextArea respectively in the json config file (config.json). As the name implies, the Single Line text box type does not wrap text, as it constructs the string as only one line, while Multiple Lines text box type constructs the string into multiple lines, hence wrapping the text in the comment box.

The article demonstrates how to change the text box type from single line to multiple lines to enable text wrapping in a comment box.

Procedure

Changing the text box type can be done in both ArcGIS Online and by defining the TextArea in the config.json file. The instructions provided describe how to change the text box type from single line to multiple line.

Note:
The web maps attribute configuration takes precedence over the setting in the edit widgets config.json file.
In ArcGIS Online:
  1. Open the web map > Configure Pop-up. For more information about configuring pop-ups, refer to the following web help document, ArcGIS Online Help: Configure pop-ups.
  2. Select the desired field > Configure Attributes.
  3. Change the TextBox Type drop-down to Multiple Line. The text box type is now converted to TextArea.
Picture of changing text box to text area.
Defining the TextArea in the config.json file: 
  1. Edit the fieldInfos section by adding the stringFieldOption property, as follows.
"fieldInfos": [  
          {  
            "fieldName": "Field_Name",  
            "label": "Field_Label",  
            "isEditable": true,  
            "stringFieldOption": "textarea"  
          },
  1. To change the size of the text box, edit the style.css file by defining the desired height and width of the box. The following code snippet demonstrates how to set the desired height and width.
.dijitTextBox {  
    width: 100%;  
}  
  
.claro .dijitTextArea {  
    height: 60px;
    width: 200px;  
}

Related Information