fix(editors): styling issue found with input group and Bootstrap

ghiscoding · Feb 27, 2021 · 18a9d02 · 18a9d02
1 parent 889191d
commit 18a9d02
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 3 deletions.
diff --git a/packages/common/src/editors/autoCompleteEditor.ts b/packages/common/src/editors/autoCompleteEditor.ts
@@ -525,6 +525,7 @@ export class AutoCompleteEditor implements Editor {
       this._$editorInputGroupElm = $(`<div class="autocomplete-container input-group"></div>`);
       this._$editorInputGroupElm.appendTo(this.args.container);
       this._$input.appendTo(this._$editorInputGroupElm);
+      this._$input.addClass('input-group-editor');
 
       const $closeButtonGroupElm = $(`<span class="input-group-btn input-group-append" data-clear></span>`);
       this._$closeButtonGroupElm = $(`<button class="btn btn-default icon-clear" type="button"></button>`);

diff --git a/packages/common/src/styles/_variables.scss b/packages/common/src/styles/_variables.scss
@@ -532,7 +532,7 @@ $text-editor-background:                              #ffffff !default;
 $text-editor-margin-bottom:                           2px !default;
 $text-editor-margin-left:                             -2px !default; /* negative number to cancel inside padding */
 $text-editor-right-input-margin-left:                 calc(#{$text-editor-margin-left} + 9px) !default;
-$text-editor-margin-right:                            2px !default;
+$text-editor-margin-right:                            0px !default;
 $text-editor-margin-top:                              0px !default;
 $text-editor-padding-bottom:                          0 !default;
 $text-editor-padding-left:                            2px !default;
@@ -541,7 +541,6 @@ $text-editor-padding-top:                             0 !default;
 $text-editor-focus-border-color:                      $editor-focus-border-color !default;
 $text-editor-focus-box-shadow:                        $editor-focus-box-shadow !default;
 $text-editor-readonly-color:                          #f0f0f0 !default;
-$text-editor-width:                                   calc(100% + 2px) !default;
 $slider-editor-height:                                $editor-input-height !default;
 $slider-editor-runnable-track-padding:                0 6px !default;
 $slider-editor-number-padding:                        4px 6px !default;

diff --git a/packages/common/src/styles/slick-editors.scss b/packages/common/src/styles/slick-editors.scss
@@ -15,10 +15,13 @@
     margin-bottom: $text-editor-margin-bottom;
     margin-right: $text-editor-margin-right;
     margin-top: $text-editor-margin-top;
-    width: $text-editor-width;
     outline: 0;
     height: 100%;
+    max-width: 100%;
 
+    &:not(.input-group-editor) {
+      width: 100%;
+    }
     &:focus {
       outline: 0;
       border-color: $text-editor-focus-border-color;