twbs/bootstrap

Collapse is broken (IE) since 2.0.2

Closed this issue · 27 comments

The Collapse CSS is broken since 2.0.2. Try to collapse in IE in the docs and you will see.

works fine for me? more details (IE version,Windows version,what exactly doesn't work,exact link to page with issue,etc) would be nice, very vague.

Im using IE9 on Windows 7.

Here is a screenshot from what i am seeing in the docs when collapsing it:
http://i44.tinypic.com/a9miw.png

Your screenshot shows it obviously broken, but I'm afraid it works fine for me on IE9 Windows 7. Are you running in a Virtual Machine or on a real box? I know VMWare has problems with IE9 rendering in some situations.

Hmm strange. I just tried it at an IE8 machine from a collegue aswell with exact the same result. Its on the native W7 client.

It happens when you open one of the boxes btw so not on render. I dont know if you tried that?

Btw, here is a JDFiddle example of the problem (tried to open the options)
http://jsfiddle.net/cRvmh/

it is broken! confirmed in multiple IE9 machines.
can be reproduced with the demo even (http://twitter.github.com/bootstrap/javascript.html#collapse).
to do that:

  • refresh page
  • open the second (still closed) group element

this will not hide the first one (height=0 doesnt work) and so they overlap.

interesting: as soon as you close and open the first one, everything works again. and if you start with all closed there is no problem. but that workaround is not pretty.

mdo commented

I see the problem in @dirkos's fiddle in IE8, but it looks resolved in 2.0.3-wip. Since this issue is showing for some, but not all, can you kind folks double check the latest 2.0.3-wip to see if you have the same problem?

I can confirm that the 2.0.3 branch does not appear to be broken anymore. it works in IE9, anyway.

Can someone confirm this aswell in 2.0.3?:
http://jsfiddle.net/cRvmh/4/

  • Click bottom element (broken slide maybe 2.0.2)
  • Click the top element again to fix the broken slide (2.0.2)
  • In the bottom element click the "click me" element.

In 2.0.1 and 2.0.2 the inline content which is expanded with JS wont work well. The inner content will slide outside the inner div element from Collapse. So the "accordion-inner" wont adjust its height in IE.

Firefox and Webkit works correct.

Someone who can test this in 2.0.3?

mdo commented

Just double checked 2.0.3-wip in IE7-9—looks good to go. Closing out.

This bug is still happening on 2.0.4

Please re-open, there was a cursory assessment that closed it out..

Confirming that IE9 on Win7 x64 doesn't do the collapsing when using it on radio buttons which are nested in a . Clicking on the radio button triggers the collapse, but clicking on the label doesn't do the collapse (this nesting is used in the default form examples in bootstrap docs).

Please reopen this ticket its still not working in IE9 using bootstrap 2.1

Also not working in IE8 using bootstrap 2.1, however it was working with bootstrap 2.0.4 on IE8.

I fixed my case with code below: (but all my divs in accordion are "collapse in")

.collapse {
overflow: hidden !important;
}

The collapse bug shows up when I view the collapse plugin in IE9 at http://twitter.github.com/bootstrap/javascript.html#collapse. The collapsed panels are all messed up.

Hey thanks @maciekkus ! Your overflow:hidden!important did the trick.

@maciekkus 's fix worked for me as well. I was having issues with IE8 on windows VMWare.

@maciekkus Thank you - this quick-fix worked for me also.

Jup @maciekkus 's fix works

Yup here too (IE9.0.8112 / Win7), thx @maciekkus

thanks @maciekkus... worked for me too...

Looks like this was fixed in v2.1.1 released 4th Sept (commit fe3ed43)

@maciekkus thanks for the workaround ... i'll put on my framework 'til a new release fix the bug.

Yeah @duncansmart ... this fe3ed43 works well too ... i'd replaced the current .collapse style and it works

f00 commented

@maciekkus my new hero!