Resize the width of the elements in a row to the same size in ArcGIS Dashboards Classic

Summary

In ArcGIS Dashboards, elements docked in the same row can be resized to the same width using the 'Distribute width evenly' function. An element can also be resized individually by dragging the vertical or horizontal border using the percentage displayed as a guide. Refer to ArcGIS Dashboards: Resize elements for more information. However, these features are unavailable in ArcGIS Dashboards Classic.

The image shows that dashboard elements are docked in two rows. This article provides the workflow to resize the elements in Row 1 to the same width in ArcGIS Dashboards Classic using ArcGIS Online Assistant.

Note:
ArcGIS Online Assistant is not supported by Esri Support Services. Errors when editing the JSON of an application can irrevocably break the application. It is imperative to create a backup copy of the JSON before editing.

Procedure

1. Log in to ArcGIS Online Assistant using an ArcGIS Online credential.
2. On the ribbon, click I want to..., and select View an Item's JSON.

3. Copy and paste the item ID of the dashboard to the Search My Content search bar, and press Enter on the keyboard.

Note:
The item ID of a dashboard is at the end of the dashboard URL. Refer to ArcGIS Dashboards: Dashboard URLs for more information.

4. Click the dashboard item under Search Results.

5. Navigate to the Data box on the right panel, and click the Edit JSON pencil icon on the header.

6. Resize the width of the elements in a row to the same size.
   1. Navigate to the "elements" nested arrays under "layout". Elements docked in the same row are listed in the same nested array, surrounded by a pair of square brackets, [ ]. The width of the elements can be modified by changing the values of the "width" keys. The image shows the two rows of elements grouped in separate nested arrays.

2. Change the values of the "width" keys. The width of an element is the percentage of the element's width in relation to the whole dashboard's width. The "width" value is presented in the decimal form of a percentage, and the "width" values of the elements in the same row add up to '1'. In this example, to resize the width of the four elements in Row 1 to the same size, the "width" values are modified to '0.25'.

7. Additionally, the height of the rows can be adjusted by modifying the "height" values. To achieve the best result, it is recommended to adjust the height of the row instead of the individual elements. The "height" key of a row is located after the square brackets surrounding the individual elements in the row. Similar to the "width" values, the "height" values of the two rows add up to '1'. In this example, the "height" values of Row 1 and Row 2 are both '0.5'.

8. Click the floppy disk icon on the Data box header to save the modifications.

9. Refresh the dashboard. The elements in Row 1 are resized to the same width.