Adjustable layering system for reusable identical Components

In the current state, my application showcases high dynamism. A list of components is received and inserted into the DOM individually, without repetition. The order in which the components appear is not constant.

However, a peculiar scenario arises when 4 document widgets are added:

https://i.sstatic.net/TVMO0.png

If these widgets are toggled, the add icon remains fixed at the top:

https://i.sstatic.net/gkkok.png

Here's the styling applied to the 'X' icon:

element.style {
    position: absolute;
    margin: -10px;
    z-index: 200;
    width: auto;
    inset: 0px 0px auto auto;
}

Currently, I manually resolve this issue by reducing the z-index value for each 'X' icon sequentially. For example, starting from 200 downwards like 200, 199, 198, 197: https://i.sstatic.net/lIlmb.png

My query pertains to ensuring that the z-index implementation decrements automatically as the component appears in the DOM. Can someone provide guidance on how to achieve this?

An illustrative small example is provided below: http://jsfiddle.net/f8jn04tb/1/

htmlcssreactjs

Answer №1

Below is a practical illustration of what I believe you are attempting to achieve. Take stock of the icons in your possession, establish an initial countdown value, iterate through the icon containers to assign z-index values counting down from the countdown variable.

let $iconCount = $('.container > ul > li').length,
    $startingAmount = 200;
for(let i = $iconCount; i > 0; i--) {
    $('.container > ul > li:nth-child('+i+')').css('z-index',($startingAmount+1)-i);
}
.container > ul > li {
    list-style-type: none;
    position: relative;
    width: 60px;
    font-family: sans-serif;
    height: 40px;
    border: 1px solid #efefef;
    margin-bottom: 10px;
}
.container > ul > li .popup {
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
    left: 100%;
    width: 300px;
    top: 0;
}
.container > ul > li .close {
    display: block;
    background-color: #1f81bd;
    color: white;
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    text-align: center;

    position: absolute;
    right: 0;
    margin: -10px;
    z-index: 200;
    top: 0;
}
.container > ul > li:nth-child(1) {
    z-index: 1;
}
.container > ul > li:nth-child(2) {
    z-index: 2;
}
.container > ul > li:nth-child(3) {
    z-index: 3;
}
.container > ul > li:nth-child(4) {
    z-index: 4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<div class="container">
        <ul>
            <li>
                <span class="icon">Icon 1</span>
                <span class="close">X</span>
                <div class="popup">
                    <ul>
                        <li>Sub item 11</li>
                        <li>Sub item 12</li>
                        <li>Sub item 13</li>
                    </ul>
                </div>
            </li>
            <li>
                <span class="title">Icon 2</span>
                <span class="close">X</span>
                <div class="popup">
                    <ul>
                        <li>Sub item 21</li>
                        <li>Sub item 22</li>
                        <li>Sub item 23</li>
                    </ul>
                </div>
            </li>
            <li>
                <span class="icon">Icon 3</span>
                <span class="close">X</span>
                <div class="popup">
                    <ul>
                        <li>Sub item 31</li>
                        <li>Sub item 32</li>
                        <li>Sub item 33</li>
                    </ul>
                </div>
            </li>
            <li>
                <span class="icon">Icon 4</span>
                <span class="close">X</span>
                <div class="popup">
                    <ul>
                        <li>Sub item 41</li>
                        <li>Sub item 42</li>
                        <li>Sub item 43</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Looking to implement a search filter in a table using reactJS. Wanting to optimize the search bar to dynamically filter the data displayed in the table

I'm having trouble with my search bar that is not currently filtering the information in my table. I have set up a table and a search bar, but the search bar isn't working as expected. When I type something in the search box, nothing happens. I s ...

javascriptreactjssearchfilter

Displaying and concealing a component using onClick in React with Material UI

I want to create a functionality where the Material UI Box component opens when clicking on a Button and closes when clicking on the Button again. I have searched for solutions on Google but couldn't find anything straightforward. I am looking for a s ...

reactjsmaterial-ui

Utilizing Electron's BrowserWindow in a React Typescript Project: A Comprehensive Guide

I am currently exploring ways to incorporate third-party URLs like Disney+ or Spotify into my application. Unfortunately, using iframe is not feasible due to many sites blocking it. My initial thought was to utilize Electron's webview tag, but this op ...

reactjstypescriptelectron

Display a forbidden icon upon hovering if ng-click is disabled

I understand that this code can be used for an icon, but I'm curious if it can also work with a span element in my specific scenario. <span ng-click="!$ctrl.clicked && $ctrl.doSomething()" ng-class="$ctrl.clicked ? 'unclickable ...

javascripthtmlangularjsangularjs-ng-clickng-class

flexLayout container with maximum width

I am struggling to make a form occupy the entire screen width, adjacent to the left. I have tried various methods like setting width to 100%, using fxFlexFill, fxLayout and fxFlexs but couldn't achieve the desired result. Maybe I am implementing them ...

htmlcssangular

Exploring the capabilities of React testing-library for interacting with the DOM within a React application

I've been working on developing custom developer tools after finding inspiration from Kent C Dodds' insightful article here. One of the challenges I encountered was automatically populating values in a form that I created. My approach involved u ...

javascriptreactjsmaterial-uireact-testing-librarytesting-library

Issue with the dimensions and proportions of the canvas

After creating a canvas with HTML and setting the ratio to 16/9 in the CSS, I specified a width of 100vw and added a border. However, I noticed that the canvas appeared larger than expected on the screen. #canvas{ width: 100vw; aspect-ratio: 16/9; border: ...

css

PHP login page without database connection

I created a login page in PHP without using a database. However, the code doesn't display an "incorrect login" message as intended. Instead, upon entering correct login details, it redirects to another page. Below are the codes for phplogin.php and ph ...

phphtml

When dynamically adding rules to jQuery validate, I encountered an unexpected error

My dynamic form validation with jQuery validate involves a drop-down menu on my HTML that includes values 1, 2, 3, and 4. Depending on the selection made from the drop-down, different div elements are displayed with corresponding fields. All the input fie ...

javascriptjqueryhtmlvalidation

Ways to modify the color of a particular list item

I am looking to change the color of only the items in a list that contain a number to blue. Specifically, I want to target the first list (the ol li) that starts with a number in it. ol li { color: blue; } <ol> <li>League 1<br> ...

htmlcss

Enhance the connectivity between flex items in Bootstrap by incorporating joining lines

I'm currently developing a "tree" using bootstrap 5, a list of items that can be navigated down into. I'm implementing this using bootstrap 5 and raw HTML. Here is the HTML structure I have set up: https://i.sstatic.net/j84vp.png However, I wo ...

htmlcssbootstrap-5

When you click on a main category, a list of its corresponding subcategories will

concept image My vision involves having users click on a category from the top menu to display all main cards (parent cards), and then further clicking on a parent card will unveil its corresponding child cards. I've even included an image to help v ...

javascripthtmljquerybootstrap-5

Loop through each JSON object and insert it into an HTML element

I am working on looping through a JSON object and converting it into HTML. While I can iterate through all the objects in the JSON, I am having trouble extracting just the first object. var res = '[{"ID":"246","mobile":"samsung","feedback":"feedback ...

javascriptjqueryhtmljson

What is the best approach to streamline this Jquery solution?

In my current jQuery setup, I have the following: $("button").click(function() { var counter = 1 $("tr td:nth-child(2)").text(counter); click ++; }); Instead of using; $"(tr td:nth-child(2)").text(counter); I am looking to implement .slice() to ...

javascriptjqueryhtml

Interactive user-friendly form with real-time response features

I am currently working on an application form where users need to answer questions, and I am in need of some responsiveness. Specifically, I would like to implement a feature that shows additional fields based on the user's selection. For example, if ...

html

The drop-down menu appears to be falling behind the 'content' div element

Whenever I try to hover over the dropdown menu, it frustratingly appears behind the content div that I painstakingly created. Despite all my efforts with z-index adjustments, the issue still persists. Below you'll find all the code for my website, but ...

javascriptjqueryhtmlcss

Prevent divs from jumping to a new line with the float property

I've been busy working on a responsive webpage and so far, everything is going smoothly. The only issue I'm facing is that when the browser window size decreases and reaches a certain point, the div elements jump to the next line. Take a look at ...

htmlcss

Utilize jQuery Function on Identical Class of <ul> Elements

I have integrated a listview control in my ASPX page. The data is being fetched from the database and displayed in the listview. I have also utilized jQuery script to implement the .fadein() and .fadeout() effects on the listview elements. However, when I ...

javascriptjqueryasp.netcss

Loading pages ahead of time in Next.js can help improve the user

Quick Summary: How can I preload pages before users navigate to them? I have a website that utilizes react-query for fetching and storing data. When a user first enters the site, they are shown a list of products which are stored in the cache. If a user c ...

reactjsnext.js

Display a loading image during the execution of the Exec_Shell Script

Looking to add a loading image while script.sh is executing Check out the code snippet below: <?php if (isset($_POST['restartserver'])) { shell_exec("my-script.sh"); } ?> <html> <body> &l ...

phpjqueryhtmlcssajax