Calcite Shell and JSAPI esriui widget panels on mobile

06-23-2021 03:15 PM
New Contributor III

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:

  <div slot="shell-header">
    <!-- menu icon, logo, title -->
  <div id="viewDiv"></div>


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?

Tags (2)
0 Kudos
0 Replies