Skip to content

Responsive apps using CSS

This sample watches the Map component's width with a ResizeObserver, and sets how the Legend displays in the map based on the size. If the map is less than 500px, then the Legend will be displayed within an Expand component, allowing for a more responsive design.

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 disappears and is replaced with the Expand component.

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