Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Fix #630: Collapse crops content that would overflow. #828

Closed
wants to merge 1 commit into from

Conversation

cambell-prince
Copy link

  • Added overflow visible to the elements style when the expand transition is complete.
  • overflow hidden is restored to the element before the collapse transition starts.

* Added overflow visible to the elements style when the expand transition is complete.
* overflow hidden is restored to the element before the collapse transition starts.
@pkozlowski-opensource
Copy link
Member

@cambell-prince I'm not sure this is a correct fix as it would make all the overflowing elements within collapse / accordion visible. I don't think this is intention of those 2 mentioned directives.

What I was suggesting in one of the other issues is that typeahead's popup element should be attached to <body> element (instead of being a sibling of an <input> element). WDYT?

@cambell-prince
Copy link
Author

It makes all overflowing elements visible only when the element is expanded, otherwise it has the original overflow hidden. When the element is expanded it seems unreasonable to impose an overflow on the containing element which crops the content. The fix works for me with containing either a typeahead (where the drop down shouldn't be cropped), and a popup menu (which I also don't want cropped).

If there's an actual negative consequence do let me know the scenario and I'll have a look at it.

@hallister
Copy link

What happens if an overflowing element is already overflowing when the transition starts? The main reason Bootstrap has the overflow: hidden; is because the animations behave badly when their is overflowing content during the expand/collapse sequence. What Twitter itself did was add the overflow: visible; after the animation completes. Just want to make sure that particular use case is handled (not familiar enough with Collapse to tell by code alone).

@cambell-prince
Copy link
Author

The overflow: visible is added after the expand animation completes. overflow:hidden is applied prior to the collapse starting.

@mvhecke
Copy link
Contributor

mvhecke commented Oct 14, 2013

What is the status on this pull request?

@pkozlowski-opensource
Copy link
Member

I wonder if we could stick to what the original Bootstrap code is doing, that is, adding the in class when the collapsible gets opened. This way people can override collapsed.in as suggested in:
http://stackoverflow.com/a/11149244/1418796

Doing so would fix #1192

@cambell-prince @caitp do you guys think it would work?

@caitp
Copy link
Contributor

caitp commented Oct 30, 2013

That's what the existing patches are doing already, the main issue has been in updating the css model to match Bootstrap3 (and ensuring that transitions aren't broken, but I guess it's about time to switch those to using $animate now)

@pkozlowski-opensource
Copy link
Member

@cambell-prince it was fixed in master, via 9eca35a, differently, by adding the in class to expanded panels. This way you can style collapse.in to your liking. Described fix is consistent with what original Bootstrap code does.

@cambell-prince
Copy link
Author

@pkozlowski-opensource Thanks, that should work out fine.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants