IE10 Accordion Collapse Fail

[bensquire]

Hi All,

I've created an app which makes use of three nested accordions, in Chrome, FF, IE11, Safari; these work perfectly.

The problem is in IE10 where the transition that causes an accordions contents to display doesn't complete. Using various inspectors I've determined that an inline style for height is set to some arbitrary pixel value and the 'collapsing' class added to the element. But the height style is never increased and so the content of the accordion expands into an div thats too small, hidden from view.

As far as I can tell its this function which is responsible, but not completing:

    function expand() {
      if (initialAnimSkip) {
        initialAnimSkip = false;
        expandDone();
      } else {
        element.removeClass('collapse').addClass('collapsing');
        doTransition({ height: element[0].scrollHeight + 'px' }).then(expandDone);
      }
    }

Line 119 of ui-bootstrap.js (v0.10).

Any help would be appreciated as otherwise I'm going to have to roll a custom solution which negates the benefits of the library....

Thanks in advance :)

Ben

[chrisirhc]

@bensquire , could you create a Plunker that illustrates this issue?

[bekos]

@bensquire Closing since haven't heard back from you.

I request this issue be re-opened. I'd like to make a Plunker but it's client sensitive data.

Accordion contains several textarea. It's collapsed by default. Upon opening in IE 10 it sets the textarea like this (removing angular brackets):

textarea class="input-small-lri-minier autosize-transition ng-pristine ng-valid" style="height: 12px; overflow: hidden; -ms-overflow-y: hidden; -ms-word-wrap: break-word;" readonly="" type="text" data-ng-model="child.value" text-area-directive=""
Value
/textarea

The height:12px; is causing it to display improperly.

[pkozlowski-opensource]

@ropidon we really can't do anything without a minimal reproduce scenario... No one is asking you to reveal any sensitive data - just use random data that exposes the issue. We can't fix things that we can't reproduce....

[bensquire]

I should apologise for not getting back to you before... I took one look at plunker and decided it would be quicker for me to just role my own solution. The jist of it was three nested accordions don't work in IE10.

[GrafRaf]

I'm have some kind problem - accordion with textareas with large text but small height
I'm don't know how fix it but create simple plunker example for reproduce this scenario
http://plnkr.co/edit/D5BNQyBwwkkUXSkApX1z?p=preview

[anilkhichar]

I am also facing the same issue with IE10.

[anilkhichar]

Anyone able to get it resolved? I need it desperately.

[anilkhichar]

Hi All,
I my case I was having hierarchical accordions (accordions within accordion). The issue was with the inner accordion, which did't get full content height in IE 10. Actually while expanding the inner accordion, parent accordion didn't get re-sized including new child content. It's working fine in IE 11 and other browsers seamlessly.

The issue was on the following animation (transition) line of code (angular-ui-bootstrap.js):

doTransition({ height: element[0].scrollHeight + 'px' }).then(expandDone);

I get it resolved with a quick patch for IE10:

if ($('#ie10').length)
   expandDone();
else
  doTransition({ height: element[0].scrollHeight + 'px' }).then(expandDone);

So in IE 10 I will not be getting animations while expanding but other browsers will work seamlessly. I know it's not a good solution, but in my tight deadline I can't dig anymore.

If anyone suggest better way, It will be really helpful.