unique customized dropdown menu that displays under additional elements in a form

I am encountering an issue with a custom dropdown component that I have created dynamically within a form. The problem arises when the dropdown menu appears after a user selects an option from another dropdown menu, which is essentially the same component being reused. In this scenario, the dynamically appearing dropdown menu gets hidden below other elements on the form, making it impossible for the user to see the available options. Strangely enough, everything works perfectly fine when the component is not loaded dynamically beforehand in the form. Attached are some screenshots for reference. Any insights on why this might be happening and how to rectify it?

https://i.sstatic.net/7c1ia.png

Here is the code snippet: Please note that this custom component enables users to input text while also selecting options from a dropdown menu that filters as they type. The parent component is referred to as the "container" with its style specified as "containerstyle". All other elements within it are considered children. The dropdown menu is positioned absolutely, while the parent container is positioned relatively:

 const containerstyle={
      position: "relative",
      top: 0,
      left: 0,
      get display(){if(layout=="stacked"){return "block"}else{return "flex"}},
      width: "100%",
      height: height || 58,
    }
  
    const inputStyle ={
      cursor: "pointer",
      fontSize: valueSize || 16,
      fontWeight: valueBold || "normal",
      color: valueColor || "black",
      backgroundColor: fill || "white",
      outline: "none",
      width: width || "100%",
      height: height || "100%",
    }
  
    const labelStyle ={
      fontSize: labelSize || inputStyle.fontSize-3,
      fontWeight: labelBold || "normal",
      color: labelColor || "rgb(145, 145, 145)",
      padding: padding || 5,
      marginRight: 10,
    }
  
  
    const dropDownStyle = {
      display: dropDownDisplay,
      position: "absolute",
      top: containerstyle.top+containerstyle.height,
      left: inputStyle.left,
      width: "100%",
      minHeight: 300,
      maxHeight: 300,
      overflowY: "auto",
      overflowX: "hidden",
      padding: padding || 5,
      display: dropDownDisplay,
      backgroundColor: dropDownFill || "rgba(255,255,255,0.95)",
      boxShadow: "5px 5px 5px lightgray",
      border: "1px solid lightgray",
      borderRadius: "0px 0px 5px 10px",
      color: valueColor || "black",
      zIndex: 999999
    }
  
    const optionsStyle = {
      display: "block",
      width: "100%",
      cursor: "pointer",
      fontSize: inputStyle.fontSize,
      fontWeight: optionWeight || "normal",
      padding: padding || 5,
      color: optionColor || "black",
      backgroundColor: fill || "rgb(255,255,255,0)",
    }
cssreactjsdrop-down-menuz-index

Answer №1

After some trial and error, I managed to find a solution to my own query. It turns out, when I dynamically load the new component, I need to ensure that its z-index is set to a higher value in the HTML markup. For instance: style={{zIndex:99999}

Here's the React code snippet for loading the component dynamically:

  {subcategories.length>0 &&
        <div className="form-floating mb-3 has-validation animate__animated animate__slideInDown animate__duration-0.5s" style={{zIndex:99999}}>
          <SuperInput
            id = "subcategory" 
            name="subcategory" 
            list={subcategories}
            value={initialFormData.subcategory}
            valueColor="#2C7BFF"
            onChange={handleChange} 
            label={"Select spend subcategory"}
            required={true}
            />
        </div>

Check out this screenshot showcasing the fixed solution:

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

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

Uh-oh! The module "side-channel" cannot be found. An error occurred in the loader with code 936 when trying to run the command "npm start"

During the execution of npm start to view my React app, I encountered the following error: > react-scripts start node:internal/modules/cjs/loader:936 throw err; ^ Error: Cannot find module 'side-channel' Require stack: - C:\Users&bs ...

javascriptreactjsnpmnode-modulesside-channel-attacks

Trouble arises with Javascript object destructuring when used with this.props in React

Just recently I discovered object destructuring with a basic object, which worked perfectly. However, when attempting to apply it in React on this.props, all my variables are returning as undefined. I'm unsure of what mistake I might be making here. A ...

javascriptreactjs

Removing accordion borders in Bootstrap and AngularJS can be achieved by customizing

Can anyone help me figure out how to hide the border in each accordion group that contains a panel and inner elements? I've tried using classes like .accordion and .inner but nothing seems to work. Any advice on where to find the specific class or ID ...

csslessangularjs-bootstrap

React Native Promise <completed>

Why am I unable to retrieve the token even though the Promise is fulfilled? useFocusEffect( React.useCallback(() => { const task = InteractionManager.runAfterInteractions(() => { const _token = AsyncStorage.getItem('@ ...

reactjsreact-native

Return an array that has been filtered to exclude any elements that are also found in a separate array

I have an API that provides a list of cars. const getAsset = async () => dbApi('list_cars', ['', 100]) .then(result => result.map(e => e.symbol)); Here, the function getAsset returns the car list. 0: "BMW" 1: "HONDA" 2: " ...

javascriptreactjs

The element does not become properly aligned once it reaches the maximum width

My HTML contains an element with the following style: { max-width: 1500px; padding-right: 40px; padding-left: 40px; width: auto; } Everything looks good when the screen is less than 1580px, and the element is centered. However, when the scree ...

htmlcss

No cookies are allowed with NextJS SSR Headers

Everything was smooth sailing on my development environment with this code - no issues, no bugs, it just worked. But when I deployed to production, it's like the cookies disappeared. The ctx.req.headers are there, but no cookie. This same code has bee ...

reactjsnext.js

The hidden overflow seems to be inconsistently effective

I've been working on creating some buttons with a rollover state. I have an image inside a div with overflow:hidden to hide the inactive state, but sometimes it doesn't work properly. What's even stranger is that when I inspect the page usi ...

htmloverflowcss

"The magic of ReactJS's virtual DOM lies in its ability to keep a lightweight representation

Stumbled upon this statement in some form while browsing the web Whenever the data underlying a React application changes, a new Virtual DOM representation of the user interface is generated. This is where things start to get interesting. Updating the b ...

javascriptjqueryreactjs

margin-top aligned to the bottom of two elements

Within this straightforward CSS snippet, my goal is to align the bottom of h1 with the bottom of p, without having h1 display below p. <div id="sqrs" style="width:200px; height:200px; border:1px solid BLACK;"> <p style="width:100px; height:100px; ...

htmlcss

Explore a variety of images within an array using Gatsby and Markdown documents

After spending more than 6 hours on this, I've decided to call it quits for today. However, I'm hoping someone out there might have a solution. The problem at hand is as follows: I'm trying to include an array of images in a Markdown file t ...

javascriptreactjsgatsby

Expanding a reducer to various pages with unique data variations

On my webpage, I have a section that displays tasks related to a specific project and the corresponding actions for each task. For example, if the URL is /project/5, the layout of the page will be like this: Project 5 Title, Due Date Task #1 : Task 1 t ...

reactjsredux

What's the trick to aligning navigation items side by side?

I'm currently working with the code snippet below: header { height: 110px; width: 100%; margin-bottom: 130px; position: fixed; top: 0; z-index: 11; /*additional styling removed*/ } nav ul { list-style: none; paddin ...

htmlcsscss-float

Having trouble with setting CSS style in <p> tags within Codeigniter framework

Why is the class mentioned in the p tag not applying in Chrome but working in IE and Firefox? <p class="p_error"><?php print $this->validation->errorValue;?></p> Here is the CSS -> .p_error{ color:red; text-align:left; font-s ...

css

Webpack dynamically imports files from a folder

In order to streamline my development process, I have a specific structure for organizing React components. Each main component has its own components folder right alongside it. Currently, I find myself manually importing each component from the components ...

javascriptreactjswebpackimportrequire

Need help resolving an issue with an HTML header that's overlapping in JavaScript?

Hey there! I was working on implementing a dynamic header that resizes as you scroll on the page. I also decided to try out Headroom as an additional solution, and it seems to be functioning well in terms of hiding the header. You can check out my progress ...

javascripthtmlcss

Harnessing the power of Bootstrap 4: Adding text and icons to your <progress> bars

I'm attempting to add an icon overlay on a progress bar within Bootstrap 4 alpha. <progress class="progress progress-primary" value="100" max="100"> <i class="fa fa-check-circle-o"></i> </progress> The desired outcome shoul ...

csstwitter-bootstraptwitter-bootstrap-4

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

What is the best way to add a div to the bottom of a grid layout?

Here is the code I am working with: .my-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); grid-gap: 20px; } .item { background-color: #ddd; height: 300px; } <div class="my-grid"> <div class="ite ...

htmlcsscss-grid

What steps can I take to ensure that this input is neat and tidy

I need to implement conditional styling for my input field. The current layout is chaotic and I want to improve it. Specifically, when the active item is "Height", I only want to display the height value and be able to change it using setHeight. const [a ...

javascriptreactjsreact-native