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>
- Clear clipboard to prohibit unauthorised copying, insert message?
- Supplying a reason for AbortController?
- Can you render a html file into a container?
- Using performance.mark() with Chrome dev tools performance tab
- How to save javascript array as redis list
- Find out whether Chrome console is open
- How to wait for requests and validate responses using playwright?
- Show Bootstrap Alert on Button Click via Javascript / jQuery
- How to post a file from a form with Axios
- Why doesn't Javascript handle divide by zero error in a try catch
- how can I add menu button in telegram bot
- Debounce in ReactJS
- Javascript question mark operator, multiple question marks
- Could not find a declaration file for module '@hookform/resolvers/zod'
- Stripe CLI trigger subscription failed event for a specifc customer
- Steps to send a https request to a rest service in Node js
- react jest confirming snapshot change
- Getting a list of all countries to using npm countries-list
- How do you limit the number of options selected in an HTML <select> element?
- Different sorting
- add an event listener on an element I've created in javascript
- Web Component not rendering when loaded from UNPKG CDN?
- Uncaught TypeError: Failed to resolve module specifier "react-router-dom". Relative references must start with either "/", "./", or "../"
- Javascript Date - set just the date, ignoring time?
- Form validate() method is not working with Vue 3 and Vuetify 3
- Running V8 Javascript Engine Standalone
- PHP - Extract frame during Video upload
- Can a PWA app be published to app store and play store
- How to check if a caught exception was thrown because of triggering an AbortController?
- Apollo Client: retrieving the results from a query with errors