ArcGIS API for JavaScript 4.17: select menu disembodied on scroll

KayceeFaunce — Sun, 12 Dec 2021 02:11:16 GMT

This could potentially also go into the storymap community. I used the ArcGIS API for JavaScript to build an application (with the periodic help of the great folks here). I'm embedding it into a storymap (using the new builder). My application has a drop down menu element that allows users to select values used in a queryTask:

When the application is placed in the main stage of the sidecar or embedded at small or medium size on the page, the drop down menu does not remain in the correct position. It moves with the page if you open it and scroll:

Is this something I can fix by adjusting my application code? In this example application, the select menu remains in position/closes when the user scrolls down the page: QueryTask | ArcGIS API for JavaScript 4.17

The following are parts of the script that correspond to the select menu (I've tried toggling the relative/absolute settings for several of the elements without success):

<style>
      #optionsDiv {
        background-color: white;
        color: white;
        padding: 10px;
        height: auto;
        width: 200px;
        position: relative;
      }
      
      .myPanel {
        width: 50%;
        position: absolute;
      }
      
      #drop-downs {
        padding-bottom: 15px;
        position: relative;
      }
      
      select {
       margin-bottom: 5px;
       position: relative;
      }

     .widget {
       border-radius:4px;
       border:1px solid #AAAAAA;
       width: 100%;
       position: relative;
     }
</style>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

        // create query div
        var node = domConstruct.create("div", {
         idName: "myPanel",
         innerHTML: "<div id=\"optionsDiv\"><div id=\"drop-downs\"><p><b>State</b></p><select id=\"valSelect\" class=\"widget\" dropdownStyle = {{ position: fixed }}><option value=\"CT\">Connecticut</option><option value=\"DC\">Washington, D.C.</option><option value=\"DE\">Deleware</option><option value=\"KY\">Kentucky</option><option value=\"MA\">Massachusetts</option><option value=\"MD\">Maryland</option><option value=\"ME\">Maine</option><option value=\"NH\">New Hampshire</option><option value=\"NJ\">New Jersey</option><option value=\"NY\">New York</option><option value=\"NC\">North Carolina</option><option value=\"PA\">Pennsylvania</option><option value=\"RI\">Rhode Island</option><option value=\"VA\">Virginia</option><option value=\"VT\">Vermont</option><option value=\"WV\">West Virginia</option></select></div><div align=\"center\"><button id=\"doBtn\">Search</button></div><div align=\"center\"><button id=\"resetBtn\">Reset</button></div><div align=\"center\"><p id=\"results\"><span id=\"printResults\"></span></p></div></div></div>"
        });   ‍‍‍‍‍‍‍‍‍‍

       // create collapsable query panel
        var widgetPanel = new Expand({
          expandIconClass: "esri-icon-search",
          view: mainView,
          expanded: false,
          expandTooltip: "Search projects",
          content: node
         });‍‍‍‍‍‍‍‍‍‍‍‍‍‍

topic ArcGIS API for JavaScript 4.17: select menu disembodied on scroll in ArcGIS JavaScript Maps SDK Questions

ArcGIS API for JavaScript 4.17: select menu disembodied on scroll