JQuery UI гармошка с autoHeight = true имеет ненужную полосу прокрутки на панелях не по умолчанию - PullRequest
Новая
       16

JQuery UI гармошка с autoHeight = true имеет ненужную полосу прокрутки на панелях не по умолчанию

22 голосов
/ 07 апреля 2009

У меня проблемы с аккордеоном jQuery. Когда я создаю панель контента, где панель не по умолчанию имеет больше контента, чем панель по умолчанию, и autoHeight имеет значение true, это обеспечивает хорошую анимацию при переключении панелей, но панель не по умолчанию получает полосу прокрутки, которая мне не нужна.

Вы можете увидеть это в действии, перейдя к http://jqueryui.com/themeroller/,, переключившись на тему, подобную "Blitzer" или "Humanity", и затем открыв Раздел 3 примера аккордеона. Бывает со мной с Safari 3.2.1 и Firefox 3.0.8.

Если вы переключитесь на autoHeight = false, то этого не произойдет, и все панели содержимого будут иметь правильную высоту, но панель содержимого отображается только в конце анимации и выглядит странно, поэтому мне пришлось отключить анимацию, чтобы избежать этой странности.

Либо я что-то неправильно понял, либо это ошибка в jQuery UI гармошке. Пожалуйста, помогите мне выяснить, какой из двух (или, может быть, оба).

Ответы [ 11 ]

52 голосов
/ 14 марта 2013

Я пробовал несколько разных вещей. autoHeight: false само по себе не работает. Вот что наконец-то сработало для меня: 

$( "#accordion" ).accordion({
            heightStyle: "content",
            autoHeight: false,
        clearStyle: true,   
        });

Я использую это в веб-части редактора контента SharePoint с фиксированной шириной, которая добавила проблему высоты при добавлении контента в виджет аккордеона.

14 голосов
/ 17 июля 2012

использование этой опции комбо работает для меня, 1. текущая версия jquery / ui 

$( '#x' ).accordion({
    autoHeight: false,
    clearStyle: true
});
13 голосов
/ 28 января 2010

Я столкнулся с подобной проблемой, у меня сработало следующее изменение в CSS. 

.ui-accordion .ui-accordion-content{
overflow:visible !important;
}
10 голосов
/ 01 сентября 2012

В настоящее время (с jQuery UI - v1.8) достаточно только autoHeight, полосы прокрутки больше не появляются. 

jQuery("#accordion").accordion(
  {
    autoHeight:false
  }
);
8 голосов
/ 18 февраля 2013

Наличие heightStyle: "content" помогло решить мою проблему. Справка: Аккордеон

6 голосов
/ 19 июня 2012

Я знаю, что это старо, но у меня была эта проблема и я приземлился здесь. Решение, которое не нарушает вашу анимацию и избавляет от анимации, можно найти здесь:

http://webdevscrapbook.wordpress.com/2012/02/24/jquery-ui-unnecessary-scrollbar-in-accordion/

Для тех ленивых, которые не хотят нажимать, короткий ответ: 

.ui-accordion .ui-accordion-content { overflow:hidden !important; }

в CSS аккордеона

4 голосов
/ 12 декабря 2009
3 голосов
/ 01 марта 2012

Я получил это по ссылке http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion, упомянутой выше. Это был один из комментариев к статье. Он избавляется от полосы прокрутки, но также сохраняет форматирование остальных элементов div. Приведенные выше ответы могут привести к тому, что контент переходит границы, как это происходило со мной. 

.ui-accordion .ui-accordion-content{
height:auto!important;
}
2 голосов
/ 28 декабря 2012

Это работает для меня: 

.ui-accordion-content-active, .ui-accordion-header-active{
    display: block;
}
1 голос
/ 12 декабря 2011

Я пытался 

.ui-accordion .ui-accordion-content{ overflow:visible !important; }

но я видел некоторые визуальные артефакты с первой вкладкой. Поэтому я решил проблему следующим образом: 

<script type="text/javascript">
    (function() {
        var fixScroll = function(event, ui) {
            $(event.target).find('.ui-accordion-content-active').css('overflow', 'visible');
         }
        $('#tabs').accordion({ 
            header: "h2",
            create: fixScroll,
            change: fixScroll
        });
    })();
</script>
Страница:
...