Collapse overflow fix

[pelme]

Currently, .collapse.in specifies overflow: hidden, probably to make the animations behave correctly.

This causes problems when using drop-downs or other dynamic content that overflows the collapse area.

This can be seen in this jsfiddle:
http://jsfiddle.net/rdXfZ/1/

The commit simply uses overflow: visible for .collapse.in, and patches the show/hide in collapse() to properly set overflow.

[pelme]

Thanks for pointing that out! The issue with overflow: hidden in .tab-content is fixed in 2.0.2-wip. See #2079 for more details.

[mdo]

Manually handled this in 2.0.2-wip by making just the CSS change. Thanks!

[pelme]

I should have probably have clarified this above: Without the javascript changes, the overflow problem is solved, but the collapsible animations does not behave correctly.

The latest animations in the docs of a 2.0.2-wip build is broken. The content is shown before the width/height is animated.

[mynameistechno]

pelme is correct, it's still jacked up

[mynameistechno]

Temporary workaround:

.collapse.in { overflow: hidden; }

When initializing collapse, pass in the following in the options hash:

    {
      hide: function() {
        $( this ).css( 'overflow', 'hidden' );
      },
      shown: function() {
        $( this ).css( 'overflow', 'visible' );      
      }    
    }

[mirasrael]

After some research and experiments I found solution with following CSS selector:

.collapse.in[style="height: auto;"] {
overflow: visible;
}

It really looks like a hack, but amazingly works.
If you just apply selector without attribute matching it will have problems with overlapping content of collapsible panel while expanding. But with this selector it applies new overflow value only after animation will be completed.

[jbranc]

thanks@mirasrael!

[jbranc]

@mirasrael also, fwiw, i had to ensure the start state was set properly. without the height:auto style set initially, then it won't work. This did the trick.
$('.collapse.in').css('height','auto');