Подтвердить что ты не робот

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

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

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

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

$( '#x' ).accordion({
    autoHeight: false,
    clearStyle: true
});

Ответ 3

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

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

Ответ 4

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

jQuery("#accordion").accordion(
  {
    autoHeight:false
  }
);

Ответ 5

Если heightStyle: "content" помогло решить мою проблему. Ссылка: Accordion

Ответ 6

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

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

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

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

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

Ответ 8

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

.ui-accordion .ui-accordion-content{
height:auto!important;
}

Ответ 9

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

.ui-accordion-content-active, .ui-accordion-header-active{
    display: block;
}

Ответ 10

Я пробовал

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

Ответ 11

Проверьте, отменено ли заполнение для ui-аккордеона-содержимого.

У меня возникла такая же проблема, когда я поставил следующее в моем css:

.container .ui-widget-content {
    padding-right: 3%;
}

Я изменил его, как показано ниже, и полосы прокрутки исчезли!

.container .ui-widget-content:not(.ui-accordion-content) {
    padding-right: 3%;
}

У меня также нет автоматической высоты.