2015-04-28 3 views
1

У меня есть проблема с использованием плагина jQuery под названием jScrollPane. На данный момент это странное поведение. Он просто не читает всю высоту содержащейся таблицы. HTML stucture состоит в следующем:jquery jScrollPane слишком маленький viewport

<div id="container-of-the-table"> 
<table></table> 
</div> 

Javascript заключается в следующем:

setupScrollPane('#container-of-the-table'); 

function setupScrollPane(el, options) { 
    var id = (el instanceof jQuery) ? el.attr("id") : el.substring(1); 
    api = $(el).jScrollPane({ 
     horizontalGutter: 6, 
     verticalGutter: 6, 
     mouseWheelSpeed: 50 
    }).data("jsp"); 
    scrollPaneApi[id] = api; 

    if (undefined != options){ 
     if (undefined != options.scrollToX){ 
      api.scrollToX (options.scrollToX); 
     } 
     if (undefined != options.scrollToY){ 
      api.scrollToY (options.scrollToY); 
     } 
    } 
} 

CSS заключается в следующем:

table { 
    display: block; 
    height: 165px; 
    width: 1080px; 
} 
#container-of-the-table{ 
    overflow:auto; 
} 

Содержимое таблицы больше чем 1000px, но показанный контент (с минимальной полосой прокрутки в правом css для плагина) меньше 200 пикселей.

Плагин, похоже, работает, но его не вызывает, он позволяет мне прокручивать только минимальную часть таблицы.

Я нашел forum post с аналогичной проблемой, но я не мог понять, как она решена.

+1

Вы пробовали модифицировать css контейнера? Возможно добавление 'height: auto; max-height: 165px' может решить проблему. –

+1

Да, это было правильное решение !!! – softwareplay

+0

Приятно рад это слышать! Тогда я отправлю ответ с этим решением! –

ответ

1

Очевидно, чтобы решить эту проблему, вам необходимо изменить css #container-of-the-table. Это правильный код:

#container-of-the-table{ 
    overflow:auto; 
    max-height: 165px; 
    height: auto; 
} 

Я рад, что мой ответ был полезным!

Смежные вопросы