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

Question

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

В Codeplex есть помощники управления учетными записями пользователей .

Проект предоставляет библиотеку для взаимодействия с механизмом UAC.

В библиотеки вы найдете класс под названием UserAccountControl. Класс имеет статический метод, называемый CreateProcessAsStandardUser, чтобы начать процесс с повышенного процесса со стандартными правами пользователя.

Короче говоря, функции открывают токен процесса процесса оболочки рабочего стола. Затем он дублирует этот токен, чтобы получить первичный токен. Этот токен затем используется для запуска нового процесса под зарегистрированным пользователем.

Для получения дополнительной информации, пожалуйста, прочитайте следующее сообщение в блоге из Aaron Margosis .

0

html css css3 overflow z-index

задан Dharmesh Vekariya 27 February 2019 в 09:07

2 ответа

Другие вопросы по тегам:

html css css3 overflow z-index

Похожие вопросы:

score 0 · Answer 1

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

.active + .content {
  overflow: visible;
}

score 0 · Answer 2

Я обновил ваш код, и теперь вы можете видеть все значения «Значение 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>