Adds important CSS override to display fides toggles (#4075)

ethyca · Sep 15, 2023 · e896f90 · e896f90
1 parent 1f253fb
commit e896f90
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -29,6 +29,10 @@ The types of changes are:
 ### Added
 - Adds check for fetch before loading fetch polyfill for fides.js [#4074](https://github.com/ethyca/fides/pull/4074)
 
+### Fixed
+
+- Ensures that fides.js toggles are not hidden by other CSS libs [#4075](https://github.com/ethyca/fides/pull/4075)
+
 ## [2.19.1](https://github.com/ethyca/fides/compare/2.19.0...2.19.1)
 
 ### Fixed

diff --git a/clients/fides-js/src/components/fides.css b/clients/fides-js/src/components/fides.css
@@ -353,8 +353,11 @@ div#fides-modal .fides-modal-button-group {
 .fides-toggle .fides-toggle-display {
   --offset: 0.1em;
   --diameter: 1em;
-
-  display: inline-flex;
+  /**
+  Because we have a "hidden" attr on this toggle element, some CSS libs customers use may include a global
+  display: none on the hidden attr. To prevent our toggles from being hidden we use !important here
+  **/
+  display: inline-flex !important;
   align-items: center;
   justify-content: space-around;