JQuery mCustomScrollbar динамическая высота

Question

У меня есть форма с выпадающим списком. Этот список динамически генерируется, и я использую mCustomScrollbar для отображения элементов в выпадающем списке.

mCustomScrollbar требуется высота, которая должна быть зафиксирована в px.

<ul class=" customScroll" role="menu" aria-labelledby="dropdownMenu1" > 

           <li >1</li> 
           <li >1</li> 
          </ul> 

сценарий: Я пробовал различные параметры в сценарии инициализации т.е. autoExpandScrollbar

$(".customScroll").mCustomScrollbar(); 

Эти параметры работают хорошо, если есть много элементов Li, но в случае 2-3 li элементов в выпадающем списке есть пустое пространство, так как высота ul превышает присутствующие элементы.

Любая идея динамически изменять высоту элемента.

Спасибо,

Answer 1

Я исправил эту проблему таким образом.

Сначала я добавил 2 класса.

.customScroll-auto{ height:auto ; overflow:hidden;} 
.customScroll-fixed{ height:150px; overflow:hidden;} 

Тогда в моем файле Jquery я проверил, если

if(array_length > myLimit) 
    add class customScroll-fixed to the ul element 
else 
    add class customScroll-auto to the ul element 

Я не знаю, если это право approach.But он работал на меня.

Answer 2

Вы можете рассчитать высоту customScroll с помощью:

$(function() { 
    function getChildrenHeight(element) { 
     var height = 0; 
     element.children().each(function() {height+= $(this).height();}); 
     return height; 
    } 

    $(".customScroll").height(getChildrenHeight($(".customScroll"))); 
}); 

Вы можете использовать функцию getChildrenheight() функцию с любым элементом, чтобы получить высоту элемента на основе его суммирования всех детей высота.