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

Question

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:

<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?

html css overflow z-index

Answer 1

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

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 3

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>

Answer 4

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>

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

Answer №1

Answer №2

Similar questions

Why have the bars been positioned on the left instead of the right, and why does the mobile version require sliding instead of simply accessing the menu through a function?

ng-deep is causing changes in sibling components

Using Google fonts offline: a step-by-step guide

Using the Croppie plugin to crop an image before uploading via jQuery Ajax in PHP

Leveraging em units in jQuery Script

The vertical tabs in JQueryUI lost their functionality when a few seemingly unrelated CSS styles were added

Tips for concealing broken images in jQuery/JavaScript when generating dynamic content

Exploring the Power of JQuery Load and CSS styling

Ensure that the navbar remains within the container as you scroll down the page

Adjust: Return scale to default

Ways to make ionic slides adhere to column width

Using a diverse class for enhancing the PrimeVue dialog's maximizable feature

Create a visually appealing Zoom Effect with CSS while ensuring the div size remains constant

How to style 1 out of every 3 div elements using absolute positioning in CSS

When submitting a form with the jQueryForm plugin, take action on the form by selecting it with `$(this)`

Store data in Laravel's storage directory

implementing jquery for dynamic pop up placement

Can you assist in resolving this logical problem?

Altering the "src" property of the <script> tag

What is causing the action button in my MUI snackbar to occupy an additional line?