Exploring the Relationship Between Z-Index and Overflow in a Collapsible Div Featuring Slim Select

Here is my demonstration of embedding a Slim Select dropdown within a collapsible div:

CodePen Example 
<html>
<head>
    <!-- MULTIPLE SELECT DROPDOWNS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.css"></link>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.js"></script>    
</head>    
<body>    
    <button class="collapsible">My Collapsible Div</button>
      <div class="content" style="z-index: 900;">    
        <select id="my_MSD" multiple>
          <option value="value 1">Value 1</option>
          <option value="value 2">Value 2</option>
          <option value="value 3">Value 3</option>
          <option value="value 4">Value 4</option>
          <option value="value 5">Value 5</option>
          <option value="value 6">Value 6</option>
        </select>    
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
      </div>    
    <button class="collapsible">Another Collapsible Div</button>
    <div class="content" style="z-index: 800;">
        Howdy<br>
    </div>
    </body>
 </html>

(Check out the CodePen link above for the complete HTML code along with CSS/Javascript.)

After expanding both sections and opening the Slim Select dropdown, I noticed that only the first three options ("Value 1" through "Value 3") are visible at once. The subsequent options ("Value 4" through "Value 6") are not displayed unless I click and hold the mouse button, which is not the desired functionality.

I have attempted to adjust the z-index values of various elements, but unfortunately, this has not resolved the issue. It seems like Slim Select may be creating a z-index "stacking context" causing this behavior, which I have yet to fully understand.

Is there a straightforward way to ensure all options from "Value 1" to "Value 6" are visible in my implementation?

htmlcssoverflowz-index

Answer №1

If you are unable to view dropdown values, it may be due to the overflow property being set to hidden on the content div. To ensure all values are visible, adjust the CSS to make the overflow visible for 'content' div that comes after 'active' elements. Simply include the following CSS code in your existing stylesheet.

.active + .content {
  overflow: visible;
}

Answer №2

I have made some updates to your code which will now allow you to view "Value 1" through "Value 6".

I have included CSS for .ss-main .ss-content.ss-open and also added some JavaScript.

I believe these changes will be beneficial for you.

$(document).ready(function(){
  $(".ss-multi-selected").click(function(){
    $(this).closest('.content').css("max-height", "inherit");
  });
});

window.onload=function(){

// BEGIN CODE FOR MULTIPLE SELECT DROPDOWNS

var my_MSD_object = new SlimSelect({
    select: '#my_MSD',
    closeOnSelect: false,
});

// END CODE FOR MULTIPLE SELECT DROPDOWNS

// BEGIN CODE FOR COLLAPSIBLE SECTIONS

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
    coll[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.maxHeight){
            content.style.maxHeight = null;
        }
        else {
            content.style.maxHeight = content.scrollHeight + "px";
        } 
    });
}

// END CODE FOR COLLAPSIBLE SECTIONS 

};
/* BEGIN STYLING FOR COLLAPSIBLE SECTIONS */

.collapsible {
    background-color: #777;
    color: white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}

.active, .collapsible:hover {
    background-color: #555;
}

.collapsible::after {
    content: '\002B';
    color: white;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active::after {
    content: "\2212";
}

.content {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    background-color: #f1f1f1;
}


.content:active {
    overflow: visible;
}

/* Additional css below */
.ss-main .ss-content.ss-open {
    position: relative;
}

/* END STYLING FOR COLLAPSIBLE SECTIONS */
<html>

<head>

    <!-- MULTIPLE SELECT DROPDOWNS -->
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.css"></link>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.18.10/slimselect.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</head>

<body>

    <button class="collapsible">My Collapsible Section</button>
    <div class="content" style="z-index: 900;">

        <select id="my_MSD" multiple>
            <option value="value 1">Value 1</option>
            <option value="value 2">Value 2</option>
            <option value="value 3">Value 3</option>
            <option value="value 4">Value 4</option>
            <option value="value 5">Value 5</option>
            <option value="value 6">Value 6</option>
        </select>

        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>
        Howdy<br>

        <br>------------------------------------------------------------  <!-- NEED FIX WIDTH & SPACING ISSUES -->
    </div>

    <button class="collapsible">Another Collapsible Section</button>
    <div class="content" style="z-index: 800;">
        Howdy<br>
        Howdy<br>
        Howdy<br>
        <br>------------------------------------------------------------  <!-- NEED FIX WIDTH & SPACING ISSUES -->
    </div>


 </body>
 </html>

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

I am currently having issues with a PHP script I wrote for sending email, as it is

After creating a form and implementing a PHP script to send an email upon form submission, I encountered an issue where the "Thank you" message was displayed on a different HTML page, but the email wasn't sent to my account. I uploaded the files to t ...

phphtmlwampserver

Invoking a function using an identifier for modification

I am currently developing a solution, and here is my progress so far: http://jsfiddle.net/k5rh3du0/ My goal is to invoke a function using both the onLoad and onerror attributes with an image. <img src="http://www.etreeblog.com/favicon.ic0" alt="status ...

javascripthtml

Perform JavaScript Actions upon Submission of a Stripe Form

I have implemented a custom checkout button for Stripe and I am looking to trigger a JavaScript function after the checkout process is successfully completed. Specifically, I want the function to change the style of the "book-appointment-button" from "no ...

javascriptphphtmlstripe-payments

Is the IE7 Modal Dialog Misaligned?

Update After some investigation, I discovered the root cause of the problem. In my code, I was referencing the height of the overlay, which resulted in different values in IE7 compared to other browsers. To resolve this issue, I adjusted the code to refe ...

javascriptjquerycssjquery-uimodal-dialog

The left border is failing to appear on the Td element

When attempting to add border styling to td elements, the left border is not displaying correctly. This issue seems to vary across different browsers. Here is the HTML code: <table class="table-bordered"> <thead> <tr> ...

javascriptjqueryhtmlcss

Decoding HTML with Python

My current project involves creating a program that can find the definition of any given word and return it. I managed to achieve this using RegEx to search for text between specific tags where the definitions are stored. However, I am now seeking a more ...

pythonhtmlpython-3.xhtml-parsing

Slider with a progress bar

Have you ever wondered if it's possible to create a progress bar using an input range? Imagine someone entering a number and the bar moves to the right, changing its background color on the left side of the thumb based on the size of the number. Check ...

javascriptcssangularjshtml

Gain access to the iterable within the adjacent tag

I am looking to access an iterable from a sibling tag, but unfortunately it is within a table which complicates things. Simply wrapping the content in a div and moving the iteration outside is not possible due to the structure of table rows. Here is an exa ...

htmlvue.js

Creating interactive JavaScript elements that can be moved around within a container

I recently faced a challenge while attempting to make draggable elements within a div. The issue arose when I realized that I couldn't figure out how to drag each element individually without affecting the others. My current code only allows for handl ...

javascripthtmljquerydrag-and-dropdraggable

The dropdown menu is currently activated, but not the individual items within it

Is there a way to make the dropdown menu active when I click on an item, specifically making the word Services active? How can this be achieved? <nav class="navbar navbar-light navbar-expand-xl"> <a class="navbar-brand" hre ...

htmlbootstrap-4dropdown

When bullet points are aligned in the middle of wrapped text instead of the top line

When using bullet points on my Joomla site for a long sentence that wraps to multiple lines, I noticed that the bullets align with the middle of the wrapped text rather than staying flush with the top line. For example, if the text wraps to 3 lines, the bu ...

css

Submit your document without relying on the web control feature

Currently, I am developing a fingerprint web application where I will be retrieving the user's fingerprint using ActiveX controls. My goal is to display the fingerprint image on the webpage without requiring users to manually select and upload it usi ...

phphtmlasp.netactivex

Creating a Vertical Navbar Dropdown in Bootstrap 3.0 Without Appending to the Last List Item Only

Currently, I'm in the process of creating a panel layout that features an elegant vertical navbar. Although everything seems to be aligned correctly and I've managed to implement a dropdown menu in a vertical layout, it keeps appending to the las ...

javascriptjqueryhtmlcsstwitter-bootstrap

What is the best way to ensure the content div fills all available space? (JQM compatibility concerns)

Currently, I am facing an issue with displaying a pdf in an iFrame within my app. The problem lies in the fact that the iFrame does not occupy the entire space between the header and footer divs on the page. I am utilizing Jquery Mobile 1.1.0 for the theme ...

htmlcssjquery-mobileiframe

Customizing the Dropdown Arrow Icon to a Desired Icon of Choice

I'm looking to customize the dropdown select on my website by changing the arrow icon to a plus icon, which will then turn into a minus icon when clicked and the choices are displayed. I'm new to jquery and eager to learn more about this language ...

jqueryhtmlcss

The issue with React select right-to-left (RTL) functionality is that it

When using react select, I include isRtl as a prop like so: <Select onChange={handleChange} isRtl isMulti options={colourOptions} /> However, only the input receives the rtl direction style and not the options. How can I ensure that both the input a ...

javascriptcssreactjsreact-select

Code snippet in Python using Selenium where Google Maps is not visible in the page source

Currently, I am attempting to extract GPS coordinates data from a property listing: https://www.primelocation.com/new-homes/details/55357965?search_identifier=d10d089a335cc707245fb6c924bafbd2 The specific GPS coordinates can be found on the "Map & Nearby" ...

pythonhtmlseleniumweb-scraping

The entry description function is not functioning properly when used with jGFeed

I have implemented jGFeed to extract data from an RSS Feed. Below is a snippet of the code I am using: $.jGFeed('http://feeds.bbci.co.uk/news/rss.xml', function(feeds){ // Check for errors if(!feeds){ ...

javascriptjqueryhtml

Is there a way to adjust the height of one div based on the height of another div in Bootstrap?

I am experimenting with a Bootstrap example featuring a table in the left column and 4 columns in 2 rows in the right column. Check out the code below: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css ...

javascripthtmlcssbootstrap-4

Resolving the Material-UI NextJS Button Styling Dilemma

I've encountered an issue with the styling of a few buttons in JS. When I apply a styling class using className, the formatting works fine on the initial render but loses its styling on subsequent refreshes. This problem is specific to two individual ...

htmlcssreactjsmaterial-uinext.js