PROBLEM

The ArcGIS Experience Builder widget size and position do not adjust according to the screen size

Last Published: November 11, 2022

Description

In ArcGIS Experience Builder, widgets' size and position are not adjusted when changing the screen size to preview a web experience. The image below displays the web experience with disarranged widgets when the screen size is changed.

The web experience with disarranged widgets when the screen size is changed.

Cause

This occurs when the size and position of widgets in a web experience are configured using absolute values in pixels (px). Using absolute values does not proportionately position the widgets relative to the screen size.

Solution or Workaround

To proportionately display the widgets, configure the widget's size and position in percentage (%). Follow the steps below to do so.

  1. Open the ArcGIS Experience Builder web experience.
  2. On the canvas, click the widget to configure the style. The Table widget is used in this example.
  3. In the Table widget configuration panel, click the Style tab.
  4. Change the unit from px to %.
    1. Under the Size & Position section, for Width, click px and select % from the drop-down list.
    2. Under the Size & Position section, for Height, click px and select % from the drop-down list. Alternatively, click Keep aspect ratio The Keep aspect ratio icon. to keep the widget's width and height ratio.
    3. Under the Size & Position section, for the widget's position, change the unit to %.
The Style tab in the Table configuration panel.
  1. Repeat Steps 2 through 4 for all widgets in the web experience.
  2. Click Save The Save icon. to save the configurations.
  3. Click Preview The Preview icon. to preview the web experience.

The image below shows the web experience with widgets displayed proportionately to the screen size.

The web experience with widgets' size and position configured

Article ID:000028678

Software:
  • ArcGIS Experience Builder

Get help from ArcGIS experts

Contact technical support

Download the Esri Support App

Go to download options

Related Information

Discover more on this topic