.media component uses overflow: hidden; and it doesn't need to

[brennanmceachran]

The current implementation of .media uses overflow: hidden; as per pull: #5024 and @stubbornella's original article.

The .media component is awesome, but it has some downsides because it uses overflow: hidden; to create a new redering context. That means we can't have any nice things like popovers, tooltips, dropdowns, typeaheads, or even box-shadows inside the element. :frowning:

There is another way which Nicole outlined in a later post using zoom:1; and :after pseudo elements to create a new rendering context without the downsides of overflow: hidden; all while keeping the same class/html structure of the current implementation of the .media component.

I'm willing to open a pull for this. If so, should I base it of Bootstrap 3.0 ( #6342 )?

[brennanmceachran]

This might actually have larger affects than I originally had thought. Though it is pretty easy to overwrite on a case by case basis. Here's Nicole's different solutions to this problem: https://github.com/stubbornella/oocss/blob/oocss-sass/components/utils/_clearfix-me.scss

[cvrebert]

Does specifying the container: 'body' option fix popovers/tooltips in this situation?

[brennanmceachran]

@cvrebert, yup but not everything has that option...

[mdo]

@brennanmceachran Sure thing, go ahead with the PR. Happy to check things out. I'll close this out for that for now.

[mdo]

That's all pretty over the top though unfortunately. So far I haven't seen a better and simpler solution. We'll stick with what we have for now. Thanks though!

[RudeySH]

What exactly happens when I just remove overflow: hidden from .media? It seems to work just fine without it.

[ChristianGrete]

+1