javascripthtmlcssdropdown
Dynamic placement and width of dropdown box (activated on click)
I'm building the following page: https://jsfiddle.net/t9f2ca4n/212/
Raw code at the very bottom.
The challenge I'm facing is that for each of the line items (Item I or Item II) need to include 2 buttons (to look at setup details, "Category" and "Setup"). Either of these buttons generate/show a hide dropdown box with the relevant details. However, my dropdown items, when you select either "category" or "setup" is not being placed correctly, and everything I have tried doesn't have a stable enough and dynamic impact.
I like where the pop-up box starts on the left, but it should end at the equivalent place to the right. Not going all the way to the end. Also, I can't find a way to dynamically ensure that the dropdown box always starts at the bottom of it's selected item row (example below of "ideal" behaviour).
it looks correct on "jsfiddle" because of the limit page size. But if you open the page separately, you will see what I mean. To be clear, this only superficially fixes where it starts on a vertical axis (right hand side is still incorrect).
What happens now (when you click the button highlighted in yellow) - NOT JSFIDDLE:
As you can see, the box appears too far down, and it ends too far to the right.
What it currently looks like in JSFiddle Because the page size just happens to be just the right height, the placement of the dropdown looks correct, but isn't because we know that a larger page does work (see above). And, the width of the dropdown is still wrong. Ultimately, this is still not dynamic enough for the dropdowns placement AND width.
(the red X's highlight what should NOT exist)
what It should look like - Ideal behaviour:
What I have tried: I have tried iterations, including:
Changing the display type away from absolute to other (relative, fixed, etc..) However, some of these either start taking over other elements, or they are pushed too away outside of all of these related elements.
Using the Bottom (and other directional placement parameters). You can still see this in the solution I have provided. However, it is too dependent on the exact width of your screen, and is therefor not dynamic enough.
Setting max-width to what is available (thinking that this would be limited to the width of the box it is in (lrcorners1) that is is in. But this takes up the whole remaining width of the page instead. Not the parent box. (You can still see this happening in both of the current examples below).
I also set the dropdown to NOT disappear when you click on it (you have to click anywhere that IS NOT the same button, or on that dropdown - although this doesn't work perfectly yet either as when you click the text, the dropdown disappears).
My main issue is the location of the dropdown and so if there is any guidance about what I'm doing wrong so that it can be placed as intended regardless of the height/width of the page. I would really appreciate that. Also, the width too, if that is simple enough. Hopefully it's clear from the details above that I have tried a number of approaches, and hopefully someone can help.
Thank you for any suggestions.
Regards, F.
Code:
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction_two() {
document.getElementById("myDropdown_two").classList.toggle("show");
}
function myFunction_three() {
document.getElementById("myDropdown_three").classList.toggle("show");
}
function myFunction_four() {
document.getElementById("myDropdown_four").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.good_button_new') & !event.target.matches('.dropdown-content')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}#header_padding {
background: #000000;
padding: 75px 0;
text-align: center;
color: #FFFFFF;
}
#rcorners1 {
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 20px;
font-weight: 600;
line-height: 18px;
/* padding: 6px 16px; */
border: 1px solid white;
border-radius: 25px;
background: white;
padding: 15px;
width: 200px;
height: 150px;
}
#big_rcorners1 {
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 20px;
font-weight: 600;
line-height: 18px;
/* padding: 6px 16px; */
border: 1px solid white;
border-radius: 25px;
background: white;
padding: 15px;
width: 500px;
height: 315px;
}
#lrcorners1 {
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 20px;
font-weight: 600;
line-height: 18px;
padding: 6px 16px;
border: 1px solid white;
vertical-align: middle;
border-radius: 10px;
text-align: middle center;
background: #fcf9f2;
padding: 10px;
width: fill-available;
height: 40px;
justify-content: space-between;
}
.good_button {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 15px 5px 15px;
padding-right: 10px;
padding-left: 10px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
justify-content: space-between;
float: right;
}
.bad_button {
appearance: none;
background-color: #ad0f07;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 15px 5px 15px;
padding-right: 10px;
padding-left: 10px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
justify-content: space-around;
float: right;
}
.good_button_new {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 15px;
position: relative;
text-align: middle center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
float: right;
max-height: 40px;
}
.button_plain {
appearance: none;
background-color: #faf1dc;
border: 1px solid rgba(217, 200, 163, 1);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 15px;
position: relative;
text-align: middle center;
vertical-align: middle;
white-space: nowrap;
float: right;
}
.wrapper {
display: grid;
row-gap: 20px;
max-width: 1100px;
margin: auto;
column-gap: 30px;
justify-content: space-around;
grid-template-areas: "tll tll trr trr" "tll tll trr trr" "lll lll lll lll" "bll bll bll bll";
}
.item_wrapper {
display: grid;
row-gap: 15px;
width: -webkit-fill-available;
margin: auto;
column-gap: 15px;
justify-content: space-around;
grid-template-areas: "block_a block_b block_c block_d block_e block_f block_g";
}
#wrapper_id {
background-image: linear-gradient(black, #301934);
}
#footer_bg {
background-color: #301934;
}
footer {
display: block;
background-color: #301934;
position: absolute;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
footer .copyright {
color: #FFFFFF;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover,
.dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
font-family: -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
font-size: 20px;
font-weight: 600;
display: none;
position: absolute;
justify-content: space-around;
background-color: #f1f1f1;
/* padding: 15px; */
width: -webkit-fill-available;
height: 200px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1000;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown a:hover {
background-color: #ddd;
}
.show {
display: block;
}<body id="wrapper_id">
<div class="wrapper">
<div id="big_rcorners1" style="grid-area: tll;">Group I</div>
<div id="big_rcorners1" style="grid-area: trr;">Group I - Changes</div>
<br>
<div id="lrcorners1" class="item_wrapper" style="grid-area: lll;">
<button class="good_button_new" style="grid-area: block_g;" onclick="myFunction()">SETUP</button>
<div id="myDropdown" class="dropdown-content" style="bottom: 350px;">
<a>TEST DROP DOWN</a>
</div>
<button class="good_button_new" style="grid-area: block_f;" onclick="myFunction_two()">CATEGORY</button>
<div id="myDropdown_two" class="dropdown-content" style="bottom: 350px;">
<a>CATEGORY DROP DOWN</a>
</div>
<p style="grid-area: block_e; text-align: middle center; vertical-align: middle;">SAMPLE_TXT</p>
<p style="grid-area: block_d; text-align: middle center; vertical-align: middle;">SAMPLE_TXT</p>
<p style="grid-area: block_c; text-align: middle center; vertical-align: middle;">SAMPLE_TXT</p>
<p style="grid-area: block_b; text-align: middle center; vertical-align: middle;">SAMPLE_TXT</p>
<p style="grid-area: block_a; text-align: middle center; vertical-align: middle;">ITEM I</p>
</div>
<br>
<div id="lrcorners1" class="item_wrapper" style="grid-area: bll;">
<button class="good_button_new" style="grid-area: block_g;" onclick="myFunction_three()">SETUP</button>
<div id="myDropdown_three" class="dropdown-content" style="bottom: 278px;">
<a>TEST DROP DOWN</a></div>
<button class="good_button_new" style="grid-area: block_f;" onclick="myFunction_four()">CATEGORY</button>
<div id="myDropdown_four" class="dropdown-content" style="bottom: 278px;">
<a>CATEGORY DROP DOWN</a>
</div>
<p style="grid-area: block_e;">SAMPLE_TXT</p>
<p style="grid-area: block_d;">SAMPLE_TXT</p>
<p style="grid-area: block_c;">SAMPLE_TXT</p>
<p style="grid-area: block_b;">SAMPLE_TXT</p>
<p style="grid-area: block_a;">ITEM II</p>
</div>
<br>
</div>
<footer></footer>Solution
This should solve your positioning of dropdown problem. I can't really get your other query, if you can elaborate, will help you there too.
What I have done?
Nothing much, added position: relative to the parent container of dropdowns (in this case, container item_wrapper class. Now every position will be with respect to them. Since you want it at the bottom flowing downwards, I gave top: 100%
<!DOCTYPE html>
<html>
<head>
<style>
#header_padding {
background: #000000;
padding: 75px 0;
text-align: center;
color: #FFFFFF;
}
#rcorners1 {
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 20px;
font-weight: 600;
line-height: 18px;
/* padding: 6px 16px; */
border: 1px solid white;
border-radius: 25px;
background: white;
padding: 15px;
width: 200px;
height: 150px;
}
#big_rcorners1 {
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 20px;
font-weight: 600;
line-height: 18px;
/* padding: 6px 16px; */
border: 1px solid white;
border-radius: 25px;
background: white;
padding: 15px;
width: 500px;
height: 315px;
}
#lrcorners1 {
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 20px;
font-weight: 600;
line-height: 18px;
padding: 6px 16px;
border: 1px solid white;
vertical-align: middle;
border-radius: 10px;
text-align: middle center;
background: #fcf9f2;
padding: 10px;
width: fill-available;
height: 40px;
justify-content: space-between;
}
.good_button {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 15px 5px 15px;
padding-right: 10px;
padding-left: 10px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
justify-content: space-between;
float: right;
}
.bad_button {
appearance: none;
background-color: #ad0f07;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 15px 5px 15px;
padding-right: 10px;
padding-left: 10px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
justify-content: space-around;
float: right;
}
.good_button_new {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 15px;
position: relative;
text-align: middle center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
float: right;
max-height:40px;
}
.button_plain {
appearance: none;
background-color: #faf1dc;
border: 1px solid rgba(217, 200, 163, 1);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: flex;
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 14px;
font-weight: 600;
line-height: 20px;
padding: 5px 15px;
position: relative;
text-align: middle center;
vertical-align: middle;
white-space: nowrap;
float: right;
}
.wrapper {
display: grid;
row-gap: 20px;
max-width: 1100px;
margin: auto;
column-gap: 30px;
justify-content: space-around;
grid-template-areas:
"tll tll trr trr"
"tll tll trr trr"
"lll lll lll lll"
"bll bll bll bll";
}
.item_wrapper {
display: grid;
row-gap: 15px;
width: -webkit-fill-available;
margin: auto;
column-gap: 15px;
justify-content: space-around;
grid-template-areas:
"block_a block_b block_c block_d block_e block_f block_g";
position: relative;
}
#wrapper_id {
background-image: linear-gradient(black, #301934);
}
#footer_bg {
background-color: #301934;
}
footer {
display: block;
background-color: #301934;
position: absolute;
width: -webkit-fill-available;
height: -webkit-fill-available;
}
footer .copyright {
color: #FFFFFF;
}
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
font-family: -apple-system,system-ui,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
font-size: 20px;
font-weight: 600;
display: none;
position: absolute;
justify-content: space-around;
background-color: #f1f1f1;
/* padding: 15px; */
width: -webkit-fill-available;
height: 200px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1000;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
display: block;
}
.dropdown a:hover {background-color: #ddd;}
.show {display: block;}
</style>
</head>
<body id = "wrapper_id">
<div class="wrapper">
<div id="big_rcorners1" style="grid-area: tll;">Group I
</div>
<div id="big_rcorners1" style="grid-area: trr;">Group I - Changes
</div>
<br>
<div id="lrcorners1" class="item_wrapper" style="grid-area: lll;">
<button class="good_button_new" style="grid-area: block_g;" onclick="myFunction()">SETUP</button>
<div id="myDropdown" class="dropdown-content" style="top: 100%">
<a>TEST DROP DOWN</a></div>
<button class="good_button_new" style="grid-area: block_f;" onclick="myFunction_two()">CATEGORY</button>
<div id="myDropdown_two" class="dropdown-content" style="top: 100%;">
<a>CATEGORY DROP DOWN</a></div>
<p style="grid-area: block_e; text-align: middle center; vertical-align: middle;">SAMPLE_TXT</p>
<p style="grid-area: block_d; text-align: middle center; vertical-align: middle;">SAMPLE_TXT</p>
<p style="grid-area: block_c; text-align: middle center; vertical-align: middle;">SAMPLE_TXT</p>
<p style="grid-area: block_b; text-align: middle center; vertical-align: middle;">SAMPLE_TXT</p>
<p style="grid-area: block_a; text-align: middle center; vertical-align: middle;">ITEM I</p>
</div>
<br>
<div id="lrcorners1" class="item_wrapper" style="grid-area: bll;">
<button class="good_button_new" style="grid-area: block_g;" onclick="myFunction_three()">SETUP</button>
<div id="myDropdown_three" class="dropdown-content" style="top: 100%">
<a>TEST DROP DOWN</a></div>
<button class="good_button_new" style="grid-area: block_f;" onclick="myFunction_four()">CATEGORY</button>
<div id="myDropdown_four" class="dropdown-content" style="top: 100%">
<a>CATEGORY DROP DOWN</a>
</div>
<p style="grid-area: block_e;">SAMPLE_TXT</p>
<p style="grid-area: block_d;">SAMPLE_TXT</p>
<p style="grid-area: block_c;">SAMPLE_TXT</p>
<p style="grid-area: block_b;">SAMPLE_TXT</p>
<p style="grid-area: block_a;">ITEM II</p>
</div>
<br>
</div>
<footer></footer>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
function myFunction_two() {
document.getElementById("myDropdown_two").classList.toggle("show");
}
function myFunction_three() {
document.getElementById("myDropdown_three").classList.toggle("show");
}
function myFunction_four() {
document.getElementById("myDropdown_four").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
if (!event.target.matches('.good_button_new') & !event.target.matches('.dropdown-content')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
</script>
</body>
</html>
- Chunk downloading of the big files right to the hard drive
- My custom CSS transition animation is not working on hover after I added AOS JS library
- how to get the Google analytics client ID
- Toggle vue-multiselect close/open on button click
- Best way to filter an objects's properties for data
- Passing function with arguments as a prop and invoking it internally in React
- Outlook calendar don't render with FullCalendar
- Is there a way to validate and allow only https url's using .isUri i.e. without using Regex in JavaScript?
- How to clear react native webview cookies?
- Skipping a test in Cypress conditionally
- How can I get all the HTML in a document or node containing shadowRoot elements
- Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; }
- Retain Twitter Bootstrap Collapse state on Page refresh/Navigation
- How to get "Results per Row" (from a 'clicked entry' off a "dropdown menu") to show up correctly?
- Is there is a C# function which is similar to .Map() in JavaScript?
- How to trigger SVG render same as manual DOM edit in Chrome using JS?
- How do I test a Node.JS Script that is not a module and runs as soon as it's called?
- Set element width based on a string that is not in the element
- Testing JavaScript Written for the Browser in Node JS
- Where are the trailing commas coming from in these radio buttons?
- How to verify a signature from the Phantom wallet?
- How to get the value of a Google Chrome flag using Javascript
- event.preventDefault cannot block clipboard paste in chatgpt.com prompt box
- Should I use ref or findDOMNode to get react root dom node of an element?
- Disable button for 5 seconds with different label and change after it
- JavaScript - Get all but last item in array
- React-Redux: Should all component states be kept in Redux Store
- Is it possible to use Closure Compiler ADVANCED_OPTIMIZATIONS with jQuery?
- Capture selected option returns not defined instead
- Uncaught TypeError: matchExpr[type].exec is not a function