topic Re: Moving the button to the top left side in ArcGIS JavaScript Maps SDK Questions

Moving the button to the top left side

SarojThapa1 — Sat, 11 Dec 2021 06:04:00 GMT

I have a dropdown menu with 3 dropdowns. For some reasons, the button goes below the Legend Layers. How can I move the button to the top left side? I have included the <body> tag below:

<body class="claro" >
<div id="content" data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">


    <div id="rightPane"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'right'">

        <div data-dojo-type="dijit/layout/AccordionContainer">
            <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
                 data-dojo-props="title:'Legend', selected:true">

                <div id="legendDiv"></div>

                <div class="dropdown">
                    <button onclick="myFunction()" class="dropbtn">Editor</button>
                    <div id="myDropdown" class="dropdown-content">
                        <a href="edit_disabled.html" target="iframe_main">Disabled</a>
                        <a href="#">Attributed Only</a>
                        <a href="#">Full Editing</a>
                    </div>
                </div>
            </div>




        </div>


    </div>

    

    <div id="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="overflow:hidden;">
    </div>

</div>

CSS for the dropdown button

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #3e8e41;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 360px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown a:hover {background-color: #f1f1f1}

.show {display:block;}

Re: Moving the button to the top left side

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:04:02 GMT

Saroj,

If I am understanding your question then all you need to do is move the dropdown Div above the legendDiv.

<body class="claro">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div data-dojo-type="dijit/layout/AccordionContainer">
                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
                    <div class="dropdown">
                        <button onclick="myFunction()" class="dropbtn">Editor</button>
                        <div id="myDropdown" class="dropdown-content">
                            <a href="edit_disabled.html" target="iframe_main">Disabled</a>
                            <a href="#">Attributed Only</a>
                            <a href="#">Full Editing</a>
                        </div>
                    </div>
                    <div id="legendDiv"></div>
                </div>
            </div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
        </div>
    </div>
</body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

and if you want your drop down menu to be on top of the legend Items then use a z-Index:

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 360px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 2;
        }‍‍‍‍‍‍‍‍‍

Re: Moving the button to the top left side

SarojThapa1 — Mon, 24 Oct 2016 15:09:30 GMT

Thanks for your response Robert. My Legend is on the right side of the map. I am trying to not have the dropdowns inside the legend panel. I want to have the dropdown menu just below the Zoom in and Zoom out options i.e. + and -.

Re: Moving the button to the top left side

RobertScheitlin__GISP — Sat, 11 Dec 2021 06:04:05 GMT

Saroj,

OK that was not clear from your previous post.

        .dropdown {
            position: absolute;
            display: inline-block;
            z-index: 2;
            left: 20px;
            top: 88px;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 360px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 2;
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<body class="claro">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:true" style="width: 100%; height: 100%; margin: 0;">
        <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
            <div data-dojo-type="dijit/layout/AccordionContainer">
                <div data-dojo-type="dijit/layout/ContentPane" id="legendPane" data-dojo-props="title:'Legend', selected:true">
                    <div id="legendDiv"></div>
                </div>
            </div>
        </div>
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="overflow:hidden;">
          <div class="dropdown">
              <button onclick="myFunction()" class="dropbtn">Editor</button>
              <div id="myDropdown" class="dropdown-content">
                  <a href="edit_disabled.html" target="iframe_main">Disabled</a>
                  <a href="#">Attributed Only</a>
                  <a href="#">Full Editing</a>
              </div>
          </div>
        </div>
    </div>
</body>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Moving the button to the top left side

SarojThapa1 — Mon, 24 Oct 2016 15:39:48 GMT

Thanks Robert. Sorry for not being clear on the post.