Merge pull request #1433 from lucasnetau/css_updates

Refactor CSS to fix various namespace clashes and improve compatibility with newer Bootstrap CSS libraries
kevinchappell · Oct 6, 2023 · 267fb17 · 267fb17
2 parents bd8ed75 + 60524bc
commit 267fb17
Show file tree

Hide file tree

Showing 10 changed files with 235 additions and 273 deletions.
diff --git a/docs/formBuilder/options/disableInjectedStyle.md b/docs/formBuilder/options/disableInjectedStyle.md
@@ -1,7 +1,19 @@
 # disableInjectedStyle
-I'm not sure why anyone would want to do this but it's been requested a couple times so here it is... `disableInjectedStyle` enables you to disabled the injeted style that ships with the plugin.
 
-## Usage
+FormBuilder ships with a minimal Bootstrap 3 set of CSS classes for rendering form controls. You may choose to disable these to ensure they do not clash with a Bootstrap 4 or 5 included stylesheet
+
+## Disable Embedded Bootstrap Classes
+```javascript
+var options = {
+  disableInjectedStyle: "bootstrap"
+};
+$(container).formBuilder(options);
+```
+
+## Disable all embedded styles
+
+You can also completely disable all embedded styles, I'm not sure why anyone would want to do this, but it's been requested a couple of times so here it is... `disableInjectedStyle` enables you to disable the injected style that ships with the plugin.
+
 ```javascript
 var options = {
   disableInjectedStyle: true

diff --git a/src/js/form-builder.js b/src/js/form-builder.js
@@ -2395,9 +2395,11 @@ function FormBuilder(opts, element, $) {
 
   loadFields()
 
-  if (opts.disableInjectedStyle) {
+  if (opts.disableInjectedStyle === true) {
     const styleTags = document.getElementsByClassName('formBuilder-injected-style')
     forEach(styleTags, i => remove(styleTags[i]))
+  } else if (opts.disableInjectedStyle === 'bootstrap') {
+    d.editorWrap.classList.remove('formbuilder-embedded-bootstrap')
   }
 
   document.dispatchEvent(events.loaded)

diff --git a/src/js/form-render.js b/src/js/form-render.js
@@ -100,7 +100,7 @@ class FormRender {
           fields = [fields]
         }
         const renderedFormWrap = utils.markup('div', fields, {
-          className: 'rendered-form',
+          className: 'rendered-form formbuilder-embedded-bootstrap',
         })
         this.appendChild(renderedFormWrap)
 
@@ -241,9 +241,11 @@ class FormRender {
       opts.notify.error(opts.messages.noFormData)
     }
 
-    if (opts.disableInjectedStyle) {
+    if (opts.disableInjectedStyle === true) {
       const styleTags = document.getElementsByClassName('formBuilder-injected-style')
       forEach(styleTags, i => remove(styleTags[i]))
+    } else if (opts.disableInjectedStyle === 'bootstrap' && opts.render && element) {
+      element.getElementsByClassName('formbuilder-embedded-bootstrap').item(0)?.classList.remove('formbuilder-embedded-bootstrap')
     }
     return formRender
   }

diff --git a/src/js/helpers.js b/src/js/helpers.js
@@ -1154,7 +1154,7 @@ export default class Helpers {
 
     d.editorWrap = m('div', null, {
       id: `${data.formID}-form-wrap`,
-      className: `form-wrap form-builder ${mobileClass()}`,
+      className: `form-wrap form-builder formbuilder-embedded-bootstrap ${mobileClass()}`,
     })
 
     d.stage = m('ul', null, {

diff --git a/src/sass/_stage.scss b/src/sass/_stage.scss
@@ -370,9 +370,14 @@
 
     .toggle-form {
       &:hover {
+        border-color: lighten($grey, 40%);
         background-color: $edit;
         color: $white;
       }
+
+      &::before {
+        margin: 0;
+      }
     }
 
     .copy-button {
@@ -688,56 +693,6 @@
   }
 }
 
-/*   ------------   TOOLTIP   ------------   */
-
-*[tooltip] {
-  position: relative;
-}
-
-*[tooltip]:hover:after {
-  background: rgba(0, 0, 0, 0.9);
-  border-radius: 5px 5px 5px 0;
-  bottom: 23px;
-  color: $white;
-  content: attr(tooltip);
-  padding: 10px 5px;
-  position: absolute;
-  z-index: 98;
-  left: 2px;
-  width: 230px;
-  text-shadow: none;
-  font-size: 12px;
-  line-height: 1.5em;
-  cursor: default;
-}
-
-*[tooltip]:hover:before {
-  border: solid;
-  border-color: $grey-dark transparent;
-  border-width: 6px 6px 0;
-  bottom: 17px;
-  content: '';
-  left: 2px;
-  position: absolute;
-  z-index: 99;
-  cursor: default;
-}
-
-.tooltip-element {
-  visibility: visible;
-  color: $white;
-  background: $black;
-  width: 16px;
-  height: 16px;
-  border-radius: 8px;
-  display: inline-block;
-  text-align: center;
-  line-height: 16px;
-  margin: 0 5px;
-  font-size: 12px;
-  cursor: default;
-}
-
 /*   ------------   Toast Message   ------------   */
 .snackbar {
   visibility: hidden; /* Hidden by default. Visible on click */

diff --git a/src/sass/_tooltip.scss b/src/sass/_tooltip.scss
@@ -0,0 +1,48 @@
+// TOOLTIP   ------------
+*[tooltip] {
+  position: relative;
+}
+
+*[tooltip]:hover::after {
+  background: rgba(0, 0, 0, 0.9);
+  border-radius: 5px 5px 5px 0;
+  bottom: 23px;
+  color: $white;
+  content: attr(tooltip);
+  padding: 10px 5px;
+  position: absolute;
+  z-index: 98;
+  left: 2px;
+  width: 230px;
+  text-shadow: none;
+  font-size: 12px;
+  line-height: 1.5em;
+  cursor: default;
+}
+
+*[tooltip]:hover::before {
+  border: solid;
+  border-color: $grey-dark transparent;
+  border-width: 6px 6px 0;
+  bottom: 17px;
+  content: '';
+  left: 2px;
+  position: absolute;
+  z-index: 99;
+  cursor: default;
+}
+
+.tooltip-element {
+  visibility: visible;
+  color: $white;
+  background: $black;
+  width: 16px;
+  height: 16px;
+  border-radius: 8px;
+  display: inline-block;
+  text-align: center;
+  line-height: 16px;
+  margin: 0 5px;
+  font-size: 12px;
+  cursor: default;
+}
diff --git a/src/sass/base/_bs.scss b/src/sass/base/_bs.scss
@@ -1,8 +1,4 @@
 // Minimal Bootstrap
-* {
-  box-sizing: border-box;
-}
-
 button,
 input,
 select,
@@ -202,61 +198,4 @@ textarea.form-control {
 
 .pull-left {
   float: left;
-}
-
-.formbuilder-required,
-.required-asterisk {
-  color: $error;
-}
-
-.formbuilder-checkbox-group,
-.formbuilder-radio-group {
-  input[type='checkbox'],
-  input[type='radio'] {
-    margin: 0 4px 0 0;
-  }
-}
-
-.formbuilder-checkbox-inline,
-.formbuilder-radio-inline {
-  margin-right: 8px;
-  display: inline-block;
-  vertical-align: middle;
-  padding-left: 0;
-  label {
-    input[type='text'] {
-      margin-top: 0;
-    }
-  }
-}
-
-.formbuilder-checkbox-inline:first-child,
-.formbuilder-radio-inline:first-child {
-  padding-left: 0;
-}
-
-.formbuilder-autocomplete-list {
-  background-color: $white;
-  display: none;
-  list-style: none;
-  padding: 0;
-  border: 1px solid $grey-light;
-  border-width: 0 1px 1px;
-  position: absolute;
-  z-index: 20;
-  max-height: 200px;
-  overflow-y: auto;
-
-  li {
-    display: none;
-    cursor: default;
-    padding: 5px;
-    margin: 0;
-    transition: background-color 200ms ease-in-out;
-
-    &:hover,
-    &.active-option {
-      background-color: $input-box-shadow-color;
-    }
-  }
-}
+}
diff --git a/src/sass/base/_fields.scss b/src/sass/base/_fields.scss
@@ -0,0 +1,56 @@
+.formbuilder-required,
+.required-asterisk {
+  color: $error;
+}
+
+.formbuilder-checkbox-group,
+.formbuilder-radio-group {
+  input[type='checkbox'],
+  input[type='radio'] {
+    margin: 0 4px 0 0;
+  }
+}
+
+.formbuilder-checkbox-inline,
+.formbuilder-radio-inline {
+  margin-right: 8px;
+  display: inline-block;
+  vertical-align: middle;
+  padding-left: 0;
+  label {
+    input[type='text'] {
+      margin-top: 0;
+    }
+  }
+}
+
+.formbuilder-checkbox-inline:first-child,
+.formbuilder-radio-inline:first-child {
+  padding-left: 0;
+}
+
+.formbuilder-autocomplete-list {
+  background-color: $white;
+  display: none;
+  list-style: none;
+  padding: 0;
+  border: 1px solid $grey-light;
+  border-width: 0 1px 1px;
+  position: absolute;
+  z-index: 20;
+  max-height: 200px;
+  overflow-y: auto;
+
+  li {
+    display: none;
+    cursor: default;
+    padding: 5px;
+    margin: 0;
+    transition: background-color 200ms ease-in-out;
+
+    &:hover,
+    &.active-option {
+      background-color: $input-box-shadow-color;
+    }
+  }
+}