Currently developing the following webpage: https://jsfiddle.net/t9f2ca4n/212/
Check the raw code at the bottom of the page.
The issue at hand involves adding two buttons for each line item (Item I or Item II) to display setup details under "Category" and "Setup". Clicking these buttons should reveal a dropdown box with the respective information. However, the placement of the dropdown items after selecting "category" or "setup" is not aligning correctly, despite several attempts to make it stable and dynamic.
While the initial position of the pop-up box on the left side looks good, it should ideally end at the equivalent place on the right side without extending all the way to the edge. I've also struggled to ensure that the dropdown box always starts at the bottom of its selected item row, as demonstrated in the "ideal" behavior image below.
While the placement looks fine on "jsfiddle" due to the limited page size, opening the page separately reveals the issue. The current set-up is flawed as it doesn't account for a larger page where the dropdown placement is incorrect, and the width is also problematic.
Current placement issue (clicking the highlighted yellow button) - NOT JSFIDDLE: https://i.sstatic.net/J5FOrx2C.png
The box appears too low and extends too far to the right, as illustrated in the image.
How it appears on JSFiddle: Given the specific page size, the dropdown placement appears correct, but only superficially. We know that a larger page would not work as intended (refer to the previous image). The width of the dropdown is also not dynamically adjusting for the placement, making it less than ideal.
(the red X's indicate what should not be present) https://i.sstatic.net/65qDuYKB.png
Desired Ideal Behavior: https://i.sstatic.net/wj0pCQmY.png
Attempts so far: I have experimented with different display types (e.g., relative, fixed), bottom placement parameters, and maximizing available width. However, none of these solutions provided the desired dynamic and stable drop-down positioning and width.
The primary issue lies in the dropdown location. Any insights on improving the current approach for consistent placement and width adjustments irrespective of page dimensions would be greatly appreciated. It's evident from the existing trials that multiple strategies have been explored, and I am hopeful for some guidance.
Thank you for any suggestions.
Regards, F.
Code:
/* JavaScript functions for toggling dropdown visibility */
// Function to toggle the first dropdown
function myFunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Function to toggle the second dropdown
function myFunction_two() {
document.getElementById("myDropdown_two").classList.toggle("show");
}
// Additional toggle functions for other dropdowns...
/* CSS styling for dropdown and buttons */
/* CSS code snippet */
<!-- HTML structure for the page -->
<body id="wrapper_id">
<div class="wrapper">
<!-- HTML elements for different sections and buttons -->
</div>
<footer></footer>