search

angular-ui / bootstrap

PLEASE READ THE PROJECT STATUS BELOW. Native AngularJS (Angular) directives for Bootstrap. Smaller footprint (20kB gzipped), no 3rd party JS dependencies (jQuery, bootstrap JS) required. Please read the README.md file before submitting an issue!
http://angular-ui.github.io/bootstrap/
MIT License
14.27k stars 6.73k forks source link

Nested accordions do not expand properly #4561

Closed peterneely closed 9 years ago

peterneely commented 9 years ago

When an accordion is nested inside another, the child accordion does not expand the height of its parent.

You can see the issue in this plunkr: http://plnkr.co/edit/Vv0DWehGhyi6eYkQCqvN?p=preview. It works correctly in ui-bootstrap version 0.12.1, but if you change the version to anything higher (including 0.14.0), it breaks.

This is how it looks in version 0.12.1 (correct):

correct

This is how it looks in any version after 0.12.1 (broken):

broken
icfantv commented 9 years ago

I'm not convinced this is a bug in UI Bootstrap (but certainly needs more investigation) because if you expand the inner accordion and then collapse and then expand the outer one, it does what you desire.

Also, just a head's up - that plunker is using Angular 1.2.x and as of 0.13.0, Angular UI Bootstrap requires Angular 1.3.x. That said, I confirmed this is still happening in Angular 1.4.6, Angular UI Bootstrap 0.14.0, and Bootstrap 3.3.5.

peterneely commented 9 years ago

Sorry, I'm using Angular 1.4.6 in another project and the accordion still exhibits the same behavior for the same versions.

To me, having to click on the inner one and then again on the outer one only confirms that there is a problem. That's not needed on ui-bootstrap 0.12.1.

Thanks for investigating.

icfantv commented 9 years ago

Sorry if I wasn't clear, I did confirm it is still happening with the latest versions of all the libraries/frameworks involved. I agree that it's a nuisance and a "feature" that was introduced somewhere...

kuldeepkeshwar commented 9 years ago

@peterneely I also have use-case for the nested accordion in our application and faced the same problem , finally ended up writing a new accordion. may be this http://kuldeepkeshwar.github.io/ui-accordion/ can solve your problem

@icfantv I want to add callback(async) handlers for before opening or closing accordion panels.

mtraynham commented 9 years ago

I encountered a similar issue. After adding angular-animate to the page it started to work.

I think it's related to the collapse directive, not triggering this done call: https://github.com/angular-ui/bootstrap/blob/master/src/collapse/collapse.js#L18

Which is kind of strange since if ($animateCss) shouldn't be truthy? (Angular 1.4.7)

icfantv commented 9 years ago

Hmmmm. That was added as a workaround when Angular 1.4.5 came out and hoarked all the animations. I still need to investigate this. We have a release coming up at work and I'm a bit preoccupied with that. If someone wants to investigate more and potentially submit a PR with tests, that would be awesome.

@kuldeepkeshwar, I could see a use case for a select similar to tabs. We do need to be very careful on adding too many configuration options as it can become too unwieldy for people to use.