Calcite Shell and JSAPI esriui widget panels on mobile

Anonymous User — Wed, 23 Jun 2021 22:15:07 GMT

I have a JSAPI 4.19 application using Calcite Shell to set up a header and mapView layout, which is based on the example from the Shell github docs page:

<calcite-shell> <div slot="shell-header">  </div> <div id="viewDiv"></div> </calcite-shell>

I then add widgets to the mapView which is loaded into the viewDiv element, for both out-of-the-box ESRI widgets and a couple custom ones. The screenshots are of the standard LayerList widget. When viewed on Android devices the output is as expected, with the mobile view widget panels appearing to be on the top level of the application, hiding the Shell header slot. On iPhone though, the header appears over the widget panels in mobile view. This is what it looks like:

When a drag happens the widget panel stays in place, but the header and the bottom of the Calcite Shell move with the drag, hiding either the top or bottom of the application depending on the direction of the drag:

Again this behavior is not seen on Android devices running the same version of this application. Is this a known issue specific to iOS? Any workarounds?

topic Calcite Shell and JSAPI esriui widget panels on mobile in Calcite Design System Questions

Calcite Shell and JSAPI esriui widget panels on mobile