Z-Index против переполнения в разборном Div с Slim Select - PullRequest
Новая
       20

Z-Index против переполнения в разборном Div с Slim Select

0 голосов
/ 27 февраля 2019

Я сделал пример размещения выпадающего списка Slim Select внутри простого разборного элемента div: https://codepen.io/wbraswell/pen/gEbdoX

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

(см. Ссылку CodePen.io выше для полного HTML и сопровождающего CSS / Javascript.)

Когда я раскладываю оба раздела и раскрываю раскрывающийся список Slim Select, я вижу только первые несколько параметров Slim Select от «Value 1» до «Value 3».Я не могу видеть «Значение 4» через «Значение 6», пока не нажму и не удержу кнопку мыши, которая явно не соответствует желаемому поведению.

Я попытался изменить все, что могу, о z-index ofвсе компоненты, но безуспешно.Я полагаю, что это может быть вызвано тем, что Slim Select создал z-index «стековый контекст», который я еще не выяснил.

Как можно просто увидеть все значения «Значение 1» - «Значение 6» в моемпример

Ответы [ 2 ]

0 голосов
/ 27 февраля 2019

Выпадающие значения скрыты, потому что мы устанавливаем переполнение: скрыто для содержимого div.Чтобы увидеть все значения, сделайте видимым переполнение для div «content», которому предшествуют «активные» элементы.Добавьте приведенный ниже CSS вместе с вашим кодом. 

.active + .content {
  overflow: visible;
}
0 голосов
/ 27 февраля 2019

Я обновил ваш код, и теперь вы видите все значения «Значение 1» - «Значение 6».

Я добавил css на .ss-main .ss-content.ss-open, а также добавил js

Надеюсь, это тебе поможет. 

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

            window.onload=function(){

// BEGIN CODE, MULTIPLE SELECT DROPDOWNS

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

// END CODE, MULTIPLE SELECT DROPDOWNS

// BEGIN CODE, 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, COLLAPSIBLE SECTIONS 

};
        /* BEGIN STYLE, 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;
        }

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

        /* END STYLE, 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 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>

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

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




    </body>
 </html>
...