$.collapse() overrides the original dimension of the collapsed element when uncollapsing

Created by: lddubeau

I've searched the issues before submitting but did not find this issue reported.

This is using Bootstrap 3.0.0 and does not appear to be browser-dependent.

Steps to reproduce

1. Open this fiddle.
2. Click on "Toggle" to collapse the first column.
3. Click on "Toggle" to uncollapse the first column.

Expected behavior

The column should uncollapse to its original width.

Actual behavior

The column takes as much width as the browser will give it.

Observations

The problem is that $.collapse(), instead of just removing the CSS styling it added to the element to collapse it, forcibly sets the dimension of collapse to the scroll[Dimension] attribute of the element being collapse and then to "auto". This effectively overrides any styling that was previously done through the style attribute (which may be fair game) and styling done through the application of CSS stylesheets.

The fiddle gives a horizontal example but the issue is the same in either dimension. Also, while the fiddle uses the grid system, this happens whenever the CSS sets a specific dimension on the element which is to be collapsed and the collapsing is set to happen on this same dimension. So this is not a grid-dependent issue.

A quick edit of the boostrap.js file I have here shows that simply removing the dimension (width or height) from the CSS of the element is enough to get the expected behavior. What I've done is make show end with:

    this.$element
      .one($.support.transition.end, $.proxy(complete, this))
      .emulateTransitionEnd(350)
    this.$element.css(dimension, "")

And made the complete() function local to show not set the dimension to "auto".

I've used a workaround like this to at least get the original dimension back but this workaround makes the transition uneven:

    jQuery("#collapse").on("shown.bs.collapse", function () { jQuery(this).css("width", ""); })