4

I'm following the instructions here (https://stackoverflow.com/a/18602739/2966090) to collapse an element horizontally in Bootstrap 3.0.2.

This method works fine in Firefox & Internet Explorer, but has a strange bounce on show in Chrome. Chrome also doesn't have any transition on hide.

I'm created a test with the behavior here: http://jsfiddle.net/eT8KH/1/

Here's the related code (also on jsfiddle):

CSS

#demo.width {
    height: auto;
    -webkit-transition: width 0.35s ease;
    -moz-transition: width 0.35s ease;
    -o-transition: width 0.35s ease;
    transition: width 0.35s ease;
}

HTML

<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">
    Horizontal Collapsible
</button>

<div id="container" style="width:200px;">
    <div id="demo" class="collapse in width" style="background-color:yellow;">
        <div style="padding: 20px; overflow:hidden; width:200px;">
            Here is my content
        </div>
    </div>
</div>

Is there a way to fix this? Or is it a bug in Chrome?

starball
  • 20,030
  • 7
  • 43
  • 238
JoshMB
  • 990
  • 1
  • 8
  • 14
  • the jsfiddle from your demo code that you are copying doesn't work in chrome either. Here's a simple using toggle instead that I think accomplishes what you are going for: http://www.webskee.com/js/animated-toggle/ – Matt Lambert Nov 07 '13 at 21:10
  • Thanks for the help, Matt. That could work, although I'm hoping for a way to work with the functionality provided by Bootstrap. If I can't, then I may have to go with something like that. – JoshMB Nov 07 '13 at 21:45

1 Answers1

2

I was able to reproduce your problem, but the solution i found is not Chrome related.

I found some CSS code was missing and a little 'bug' in the plugin code. I have already wrote a PR to fix that, see: https://github.com/twbs/bootstrap/pull/15104

Demo: http://jsfiddle.net/zu5ftdjx/

To fix this issue in your current code:

in collapse.js: line 104 should become this.$element[dimension](this.$element[dimension]())[0][$.camelCase(['inner', dimension].join(''))]

less (in component-animations.less)

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  .transition-property(~"height, visibility");
  &.width {
  .transition-property(~"width, visibility");
  width:0;
  height:auto;
  }
  .transition-duration(.35s);
  .transition-timing-function(ease);
}

css (compiled output of the preceding Less code)

.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  -webkit-transition-property: height, visibility;
  transition-property: height, visibility;
  -webkit-transition-duration: 0.35s;
  transition-duration: 0.35s;
  -webkit-transition-timing-function: ease;
  transition-timing-function: ease;
}
.collapsing.width {
  -webkit-transition-property: width, visibility;
  transition-property: width, visibility;
  width: 0;
  height: auto;
}
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224