The dropdown menu is getting hidden behind the parent div due to overflow issues, even with z-index not resolving

Hey everyone, I'm having trouble with the overflow breaking the code

I've noticed that the code works fine under two conditions: a) if I remove the overflow-x and overflow-y from .bs-exmple or b) if I remove the ul and li elements

However, I need both in my code. With the CSS and ul and li elements present, the dropdown collapses behind the div. What could I be missing?

.bs-example {
  border: 1px solid black;
  overflow-y: scroll;
  overflow-x: hidden;
  min-height: 100px;
  max-height: 250px;
}

.bs-example .dropdown {
  position: absolute;
  z-index: 999;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<div class="container">
  <div class="bs-example">
    <ul class="list-group ">
      <li class="list-group-item">
        <div class="dropdown">
          <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Menu
                </button>
          <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </div>

      </li>
    </ul>
  </div>
</div>

As you can see, the image linked below shows the dropdown positioned behind the div

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

javascripthtmlcssbootstrap-4

Answer №1

Give this a shot:

$(document).ready(function() {
  $("#dropdownMenuButton").click(function(){
    $('.dropdown-menu').toggle();
  })
})
.helper {
  min-height: 100px;
  max-height: 250px;
  position: relative;
}

.bs-example{
  border: 1px solid black;
  overflow-y: scroll;
  overflow-x: hidden;  
  min-height: 100px;
  max-height: 250px;
  left: 0px;
  right: 0px;
  position: absolute;
}

.dropdown {
  position: absolute;
  z-index: 999;
  left: 20px;
  top: 40px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="container">
  <div class="helper">

    <div class="bs-example">
      <ul class="list-group ">
        <li class="list-group-item"></li>
      </ul>
    </div>

   <div class="dropdown">
     <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Menu
      </button>
      <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>

  </div>
</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

Ensure to close the Ajax request from PHP before the script finishes executing

Is there a way to terminate an Ajax request from PHP before the script finishes executing? For instance, if a user requests php.php and it includes the line 'echo "phpphp"', how can we ensure that the Ajax request is completed with the data "phpp ...

phpjavascriptjqueryajax

What are the different HTTP Methods supported by AJAX?

Considering that HTTP supports a variety of methods such as GET, PUT, POST, DELETE (and others like PATCH, HEAD, OPTIONS, etc.), I am pondering over which of these methods an AJAX request typically utilizes. Is there an option to specify which method we ...

javascriptajaxresthttp

Utilizing JQuery to update the selected item in a menu

Hey there! I'm currently using the jquery chosen plugin and I'm trying to make it so that I can select a menu value based on the selection from another select menu. Unfortunately, my code only works with a simple select menu and I need it to work ...

javascriptjquery

Removing all items with a specific ID and its related items in Javascript: How to achieve this recursively?

I am currently facing some challenges in figuring out the most effective approach for this scenario. For example, consider the data structure below: const arr = [{ parentId: 1, children: [ { childId: 11 }, { childId: 21 }, { childId: 31 }, ...

javascriptarraysrecursion

A guide on incorporating JSX file rendering in Flask

I am currently working on integrating React Contact form with MYSQL Workbench using Flask. I have set up the database initialization and model using SQLAlchemy, but I am encountering an issue with the render_template function. Is it possible to render th ...

javascriptpythonreactjsflask

JavaScript countdown feature that includes hours and minutes

Currently, I have successfully implemented a countdown timer in seconds. However, I am looking to enhance this by incorporating hours and minutes into the countdown as well while maintaining the existing structure using only pure JavaScript. The desired ou ...

javascriptjquery

Dealing with substantial ajax responses using JavaScript

Currently, I am in the process of developing a website that utilizes jQuery File Tree. However, there is an issue with the enormous size of the AJAX response from the server - 900 KB and containing approximately 70,000 'files' (which are not actu ...

javascriptxmlajaxperformancebrowser

What is the process for indicating the cache directory in npm5 when using the install command?

When using yarn, you can specify the cache folder with yarn --cache-folder [CACHE_FOLDER]. Is there an npm5 alternative to this? One option is to set the cache folder with a separate command: npm config set cache [CACHE_FOLDER]. However, I'm wonderin ...

javascriptcachingnpmnode-modules

Tips for manipulating HTML using JavaScript and detecting the updates in ASP.NET after a postback

This is a unique challenge, and despite my efforts to find a solution in various sources, I couldn't overcome this specific scenario. I want the user to input multiple values into a single text field, like this: <div style="margin-left: 5px; disp ...

c#javascriptasp.net

Display the contents of a JSON array in an HTML format

I have designed an exercise that requires me to display the cities corresponding to each department based on a JSON file. Currently, I am able to display the departments in their respective selections, but I am struggling to only show the cities that corre ...

javascripthtmljsonajaxmatrix

Encounter a snag while using Chrome to access an external API through jQuery

I am currently utilizing jQuery to make a request to an external API via AJAX. $.ajax({ url: https://exampleAPI, method: "GET", contentType: "text/plain", dataType: "jso ...

javascriptjqueryajaxgoogle-chromeasp.net-mvc-4

Leveraging jQuery's $.getJSON method to fetch localization data from aprs.fi

Utilizing JSON to retrieve localization coordinates from is my current goal. I came across an example on http://api.jquery.com/jQuery.getJSON: <script> $.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?", { tags: ...

javascriptjqueryjsonlocalizationgetjson

Transition effect for switching between pages with animated motion

I'm currently facing challenges in implementing page transition animations on my website. Can someone assist me with this? Here is the JavaScript code I have for animation (fading out the login form when the login button is clicked): <?php sessio ...

javascriptphpjqueryhtmlanimation

When trying to click the button in Navbar.jsx, I encounter an error when attempting to invoke the setShowCart(true) function

I've encountered an issue while trying to call the setShowCart(true) function in Navbar.jsx. I'm unsure of how to fix this. import React from 'react' import Link from 'next/link'; import {AiOutlineShopping} from 'react-ic ...

htmlreactjstypescriptnext.jsreact-hooks

How can I create a route using associations for /users/me in Sails.js?

My primary model is called Accounts. Additionally, I have several Has Many models such as Notifications and Friends Within my file named main.js, I would prefer to execute commands like: socket.get('/users/me/notifications'); instead of: soc ...

javascriptnode.jssails.js

Arranging elements and buttons inside of components to create a cohesive design

My React application consists of two components: Open and Save. The Save component has a button labeled as saveButton. On the other hand, the Open component contains an openButton, as well as a stopButton and executeButton that are conditionally displayed ...

htmlcssreactjs

Preserving items post-parse query in cloud code

Currently, I am in the process of developing Parse Cloud Code to retrieve JSON data from a third-party API. My goal is to make modifications to the data, check if it already exists, and save it if it doesn't. However, I am encountering difficulties in ...

javascriptjsonparse-platformparse-cloud-code

There is a lack of 'Access-Control-Allow-Origin' header, resulting in no access to the API

Having some trouble with the UK Parliament API, I keep encountering this error: XMLHttpRequest cannot load . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.com' is therefore not a ...

javascriptjqueryjsonapi

Illustration serving as a backdrop for a section

I'm currently working on a template design that includes a column on the left side with an image as the background. Within this image, I need to place form inputs, which could vary in quantity depending on the requirements. The issue I'm facing ...

htmlcssbootstrap-4

Using Perl script to identify and highlight rows based on specific cell values

I am struggling with how to highlight a row when Column F displays a value of F. I understand that I can achieve this using CSS/JS, but I keep hitting a roadblock. Coding is new to me, so I would greatly appreciate some assistance if possible. Objective: ...

htmlcssperl