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-аккордеоне. Пожалуйста, помогите мне выяснить, какой из них (или, возможно, и тот и другой).
Ответы
Ответ 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
Ответ 7
попробуйте это
http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion
Ответ 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%;
}
У меня также нет автоматической высоты.