AnsweredAssumed Answered

Moving the button to the top left side

Question asked by sarojthapa60 on Oct 24, 2016
Latest reply on Oct 24, 2016 by sarojthapa60

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;}

Outcomes