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

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

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

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

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


accordion jquery-ui
person Jaanus    schedule 07.04.2009    source источник
comment
Интересно, решил ли какой-либо из ответов проблему или нет...   -  person T J    schedule 21.07.2014
comment
Этому вопросу 5 лет, и я уже давно прошел проект, в котором у меня был вопрос. На самом деле у меня нет хорошего способа проверить ответы самостоятельно :(   -  person Jaanus    schedule 22.07.2014
comment
Но нашли ли вы решение или пошли дальше, не исправив эту проблему в своем проекте? Когда я задаю вопрос и сам нахожу решение, я публикую решение, чтобы поделиться им с другими людьми, а также сообщаю, что решение было найдено. Но я понимаю, что вы задали этот вопрос 7 апреля 2009 года, и я вижу, что ответы относятся к 2010, 2011, 2012 и 2013 годам. Обычно проекты не могут длиться так долго. Ответы пришли очень поздно.   -  person Jaime Montoya    schedule 25.09.2017
comment
Я не помню этот проект, и что я там делал. Может быть, от него отказались до того, как стало необходимо решение.   -  person Jaanus    schedule 26.09.2017

Ответы (11)


arrow_upward
52
arrow_downward

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

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

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

person user2170518    schedule 14.03.2013
comment
Этот ответ устранил мою проблему. Другие ответы (с хаком переполнения css) устранили проблему, но, в свою очередь, вызвали другую: плавная анимация схлопывания открытой в данный момент панели аккордеона стала жесткой и дергающейся. - person EbbnFlow; 23.05.2013
comment
heightStyle: content - на победу. - person KSwift87; 20.06.2013
comment
Дин-дин-дин! Я предполагаю, что это новое в пользовательском интерфейсе jQuery, поскольку в API не упоминалось autoHeight или clearStyle. - person sampoh; 05.08.2013
comment
Отлично, это исправило это и для меня! да, это должен быть принятый ответ +2 - person morktron; 13.05.2014
comment
Я применил ваше решение, и оно решило проблему для меня, но в моем случае мне не нужно было использовать clearStyle: true. - person Jaime Montoya; 25.09.2017

arrow_upward
14
arrow_downward

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

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

arrow_upward
13
arrow_downward

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

.ui-accordion .ui-accordion-content{
overflow:visible !important;
}
person Mugunth    schedule 27.01.2010
comment
это работает, но анимация, кажется, сломана. Текущий элемент содержимого перекрывается рамкой аккордеона во время анимации. - person Maksim Vi.; 21.09.2010
comment
Спасибо за это, это действительно помогло мне - person Mitch Malone; 09.02.2011

arrow_upward
10
arrow_downward

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

jQuery("#accordion").accordion(
  {
    autoHeight:false
  }
);
person dxvargas    schedule 01.09.2012
comment
Да, было бы хорошо, если бы это набрало больше голосов, чтобы продвинуться вверх по странице. - person jasonflaherty; 25.01.2013
comment
Это будет обрабатывать большинство случаев, однако, когда это только один элемент в аккордеоне (по крайней мере, это кажется причиной), полоса прокрутки все равно будет отображаться. - person zw324; 15.04.2013

arrow_upward
8
arrow_downward

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

person Abhishek    schedule 18.02.2013

arrow_upward
6
arrow_downward

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

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

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

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

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

person noah    schedule 19.06.2012
comment
Из всех ответов на этот вопрос в этом решении нет ненужной полосы прокрутки, а анимация не нарушена. Однако высота для каждого <div> одинакова. Тем не менее, спасибо, что поделились этим решением noah. +1 - person Rob; 27.06.2012
comment
Из всех ответов, это был единственный, который работал для меня. - person Sanjay Manohar; 01.05.2016

arrow_upward
4
arrow_downward

попробуй это

http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion

person objects    schedule 12.12.2009
comment
И overflow:visible !important, и overflow:hidden !important решают проблему полосы прокрутки, но портят анимацию. - person TruckerG; 06.10.2011
comment
Я столкнулся с проблемой только в IE7, и overflow:visible !important и overflow:hidden !important, кажется, работают для меня, оставляя анимацию нетронутой. Я использую версию 1.8.17 пользовательского интерфейса jQuery. - person Joseph Woodward; 28.02.2012
comment
Ответы только на ссылки крайне не рекомендуются в SO. Пожалуйста, добавьте ключевые понятия в сам ответ. - person T J; 21.07.2014

arrow_upward
3
arrow_downward

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

.ui-accordion .ui-accordion-content{
height:auto!important;
}
person Damien    schedule 01.03.2012

arrow_upward
2
arrow_downward

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

.ui-accordion-content-active, .ui-accordion-header-active{
    display: block;
}
person user1933377    schedule 28.12.2012

arrow_upward
1
arrow_downward

Я пытался

.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>
person Dmitriy Eroshenko    schedule 12.12.2011

arrow_upward
0
arrow_downward

Проверьте, не переопределяется ли отступ для ui-accordion-content.

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

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

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

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

У меня тоже не включена автовысота.

person Tabrez    schedule 09.08.2012