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;}
Solved! Go to Solution.
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>
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;
}
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 -.
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>
Thanks Robert. Sorry for not being clear on the post.