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

dropdown, adding "open" to body for append-to-body has side effects #4466

Closed
jaydiablo opened this issue Sep 24, 2015 · 7 comments
Closed

dropdown, adding "open" to body for append-to-body has side effects #4466

jaydiablo opened this issue Sep 24, 2015 · 7 comments
Assignees
Milestone

Comments

@jaydiablo
Copy link
Contributor

This was mentioned in #4240. With the changes made to the append-to-body dropdowns in 0.13.4 (specifically adding the class "open" to the body element for these dropdowns), other components on the page may be affected, particularly in a bootstrap heavy application.

In my case, I'm using dangrossman's date range picker: https://github.com/dangrossman/bootstrap-daterangepicker

Here's a plunkr demonstrating the issue:

http://plnkr.co/edit/5QoR6ZAgZZcORpLWghFu?p=preview

If you click on the append-to-body dropdown there, you'll notice that the date range picker opens as well. I believe it only happens if the date range picker hasn't been opened by clicking on it yet.

This happens because bootstrap has this defined for .open > .dropdown-menu:
https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_dropdowns.scss#L121

The date range picker is appended to body as well, so matches that selector (and has the dropdown-menu class defined on it). This might be fixable via user-land CSS, but overall I think adding the "open" class is too general in an application that makes use of bootstrap compatible components.

I don't know if it's possible to apply this "open" class to a different element, or possibly even store the dropdowns in a container that gets the class change. That would probably be ideal.

However, if that's not possible, would it be possible to be able to specify what class is used? I noticed that "open" is defined in a constant here:

https://github.com/angular-ui/bootstrap/blob/master/src/dropdown/dropdown.js#L3

Could the library be modified so it's possible to define what this class is, perhaps through a provider?

@wesleycho
Copy link
Contributor

Hmm, I'm thinking maybe we should revert bf63cef - thoughts @Foxandxss ?

@Foxandxss
Copy link
Contributor

What I am thinking that all the logic for append to body is done in a very complicated way and full of weird side effects.

If we revert that, we get the previous issue again. Uhm.

@jaydiablo
Copy link
Contributor Author

I was able to resolve this with user land CSS:

.open > .daterangepicker {
  display: none;
}

As the JS adds "display: block" to the element directly when it's opened through its own click (and then adds "display: none" to the element directly when it's closed, which is why you don't see it open with the dropdown after it's been opened directly).

I'll keep an eye out for other issues regarding the .open class not playing nicely with other components though. I don't think we're using much else that would react to that, but I haven't tested everything.

@wesleycho
Copy link
Contributor

@Foxandxss I think that is ok if that issue comes back - maybe a better solution would be to allow a custom class to be added to the body tag for an open dropdown. There were a few complaints about this due to the high level CSS that the dropdown class addition adds.

@wesleycho
Copy link
Contributor

Just a note, I have reverted the previous breaking commit with 6f9f1fc - we need to implement this feature with allowing a custom open class on body.

@wesleycho wesleycho self-assigned this Oct 3, 2015
@Jacquelin
Copy link

Hi,

I encounter a similar problem. The difference is the use of class "dropdown" in body. This css Class is set to "position: relative;"
I use ui angular layout (https://angular-ui.github.io/ui-layout/, an AngularUI lib !). This library uses a lot of absolute position ... Result, I have a blank page.

For now I commented the line (body.addClass ('dropdown')) and it's works. Since a problem is raised here regarding the dropdown / appendToBody / Class, I thought you aware of my problem. I hope this could help you

PS : Thx for this lib !!

@wesleycho
Copy link
Contributor

Upgrading to 0.14.0 (released within the past hour) fixes the dropdown class in the body tag issue - I reverted that.

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

Successfully merging a pull request may close this issue.

4 participants