代码之家  ›  专栏  ›  技术社区  ›  Jaanus

符合autoheight=true的jquery ui在非默认窗格上有不必要的滚动条

  •  22
  • Jaanus  · 技术社区  · 16 年前

    我对jquery手风琴有问题。当我创建一个内容窗格,其中非默认窗格的内容比默认窗格多,并且autoheight为true时,这在切换窗格时提供了很好的动画,但非默认窗格会得到一个我不需要的滚动条。

    你可以通过 http://jqueryui.com/themeroller/ ,切换到“闪电战”或“人性”这样的主题,然后打开手风琴示例的第3节。在我使用Safari3.2.1和Firefox3.0.8时发生。

    如果切换到autoheight=false,则不会发生这种情况,并且所有内容窗格都具有正确的高度,但内容窗格仅在动画结束时渲染,看起来很奇怪,因此我必须关闭动画以避免这种奇怪。

    要么我误读了什么,要么这是jquery ui中的一个bug。请帮我弄清楚这两个是哪一个(或者两者都有)。

    11 回复  |  直到 12 年前
        1
  •  51
  •   coolguy    12 年前

    我试了几种不同的方法。autoheight:false本身不起作用。这就是我最后的工作:

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

    我在一个固定宽度的sharepoint内容编辑器web部件中使用了这个,在向accordion小部件添加内容时,这增加了高度问题。

        2
  •  14
  •   pneftali    13 年前

    使用这个组合选项对我有效,1.jquery/ui的当前版本

    $( '#x' ).accordion({
        autoHeight: false,
        clearStyle: true
    });     
    
        3
  •  13
  •   coolguy    12 年前

    我也遇到了类似的问题,对我来说,css的以下改变起了作用。

    .ui-accordion .ui-accordion-content{
    overflow:visible !important;
    }
    
        4
  •  10
  •   dxvargas    12 年前

    现在(使用jquery ui-v1.8),仅仅自动高度就足够了,不再出现滚动条。

    jQuery("#accordion").accordion(
      {
        autoHeight:false
      }
    );
    
        5
  •  8
  •   coolguy    12 年前

    heightStyle: "content" 帮助解决了我的问题。 参考文献: Accordion

        6
  •  6
  •   noah    13 年前

    我知道这是旧的,但我有这个问题,降落在这里。不中断动画并删除动画的解决方案可以在以下位置找到:

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

    对于那些懒散的不想点击的少数人来说,简单的答案是:

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

    在手风琴的css中

        8
  •  3
  •   Damien    13 年前

    我是从 http://helpdesk.objects.com.au/javascript/how-to-avoid-scrollbars-when-using-jquery-accordion 上面提到的链接。这是文章的评论之一。它去掉了滚动条,但也保留了其余div的格式。以上的答案可能会导致内容像我一样跨越国界。

    .ui-accordion .ui-accordion-content{
    height:auto!important;
    }
    
        9
  •  2
  •   user1933377    12 年前

    这对我有效:

    .ui-accordion-content-active, .ui-accordion-header-active{
        display: block;
    }
    
        10
  •  1
  •   Dmitriy Eroshenko    13 年前

    我试过

    .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
  •  0
  •   Tabrez    12 年前

    检查是否覆盖了UI手风琴内容的填充。

    当我在css中添加了以下内容时,我也遇到了同样的问题:

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

    我把它改成如下所示,滚动条不见了!

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

    我也没有打开自动高度。