swimlane / ngx-charts

:bar_chart: Declarative Charting Framework for Angular
https://swimlane.github.io/ngx-charts/
MIT License
4.29k stars 1.15k forks source link

Issues with Foundation overriding position-top/bottom classes #746

Open asfo opened 6 years ago

asfo commented 6 years ago

I'm submitting a ... (check one with "x")

[*] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior I'm using currently Foundation (6.3.1 at this moment) in a project and with the tooltips there is an issue because of the classes .position-top/bottom (and related) since Foundation use the same classes for other stuff.

Expected behavior The tooltips should show correctly with Foundation

Reproduction of the problem Add Foundation CSS to style.css @import url('../node_modules/foundation-sites/dist/css/foundation.min.css'); That's it, now Foundation overrides the CSS

What is the motivation / use case for changing the behavior? Because of this issue the classes position-top/bottom... should be changed so there is no issues with Foundation.

Please tell us about your environment: Windows 10 - Angular-CLI 1.7.0 - Atom - NodeJS/Nginx - Angular 5.0.0

Also... I tried with:

.position-bottom {
  width: auto !important;
  max-width: initial !important;
  min-width: auto !important;
  height: auto !important;
  max-height: initial !important;
  min-height: auto !important;
  overflow: hidden !important;
  -webkit-transform: none !important;
  transform: none !important;
  top: inherit;
  bottom: inherit;
  right: inherit;
  left: inherit;
}

.position-top {
  width: auto !important;
  max-width: initial !important;
  min-width: auto !important;
  height: auto !important;
  max-height: initial !important;
  min-height: auto !important;
  overflow: hidden !important;
  -webkit-transform: none !important;
  transform: none !important;
  top: inherit;
  bottom: inherit;
  right: inherit;
  left: inherit;
}

But with this change I override the original Foundation class and is giving me issues in another part of my design because of this.

chunhui2001 commented 6 years ago

I have same issue !

marcodelu commented 6 years ago

Same issue here, but in my case css is overwritten by a Bootstrap template. So i forked this repo and edited some css classes.