Make widgets responsive

The jimu.js file not only supports a responsive UI layout but also provides functions for developers to develop responsive Web AppBuilder for ArcGIS widgets.

There are two ways to achieve the responsive goal, CSS and Dijit layout. The CSS classes can be found in jimu.js/css/jimu.css.

NameDescription

jimu-r-row

One row of the layout.

col-1-2

The width is half of its parent.

col-1-3

The width is one-third of its parent.

col-2-3

The width is two-thirds of its parent.

col-1-4

The width is one-fourth of its parent.

col-3-4

The width is three-fourths of its parent.

The Dijit layout can be found in jimu.js/dijit.

NameDescription

TileLayoutContainer

Dijit layout.

If both of these cannot meet your requirements, follow the best practices for the responsive UI.