Responsive apps using CSS

This sample watches the MapView's widthBreakpoint property and based on the view size, sets how the Legend widget displays in the view. For example, if the view is set to a very small size, i.e. xsmall, the Legend widget does not display. Rather, it shows the Expand widget.

Use dark colors for code blocksCopy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
        // Breakpoints
        reactiveUtils.watch(
          () => view.widthBreakpoint,
          (breakpoint) => {
            switch (breakpoint) {
              case "xsmall":
                updateView(true);
                break;
              case "small":
              case "medium":
              case "large":
              case "xlarge":
                updateView(false);
                break;
            }
          }
        );

Listening for breakpoints is helpful as it removes the need for multiple @media queries.

In addition to listening to breakpoints, the sample also makes use of CSS view-size classes. If the view's width is less than small, the UI's zoom in and zoom out buttons do not display.

Use dark colors for code blocksCopy
1
2
3
.esri-view-width-less-than-small .esri-zoom .esri-widget--button {
  display: none;
}

To test this application, open the sample and resize the window larger and smaller. You should notice that when you get to a mobile-specific view size the Legend widget disappears and is replaced with the Expand widget. In addition, the zoom in and zoom out buttons no longer display.

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.