diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.scss b/ui-ngx/src/app/shared/components/json-object-edit.component.scss
index cbe62c5b90..44a6028717 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.scss
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.scss
@@ -13,49 +13,49 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
-:host {
+.tb-json-object {
position: relative;
.fill-height {
height: 100%;
}
-}
-.tb-json-object-toolbar {
- button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
- align-items: center;
- vertical-align: middle;
- min-width: 32px;
- min-height: 15px;
- padding: 4px;
- margin: 0;
- font-size: .8rem;
- line-height: 15px;
- color: #7b7b7b;
- background: rgba(220, 220, 220, .35);
+ .tb-json-object-toolbar {
+ button.mat-mdc-button-base, button.mat-mdc-button-base.tb-mat-32 {
+ align-items: center;
+ vertical-align: middle;
+ min-width: 32px;
+ min-height: 15px;
+ padding: 4px;
+ margin: 0;
+ font-size: .8rem;
+ line-height: 15px;
+ color: #7b7b7b;
+ background: rgba(220, 220, 220, .35);
- &:not(:last-child) {
- margin-right: 4px;
+ &:not(:last-child) {
+ margin-right: 4px;
+ }
+ }
+ button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
+ height: 23px;
}
}
- button.mat-mdc-button-base:not(.mat-mdc-icon-button) {
- height: 23px;
- }
-}
-.tb-json-object-panel {
- height: 100%;
- margin-left: 15px;
- border: 1px solid #c0c0c0;
-
- #tb-json-input {
- width: 100%;
- min-width: 200px;
+ .tb-json-object-panel {
height: 100%;
- min-height: 300px;
+ margin-left: 15px;
+ border: 1px solid #c0c0c0;
- &:not(.fill-height) {
- min-height: 200px;
+ #tb-json-input {
+ width: 100%;
+ min-width: 200px;
+ height: 100%;
+ min-height: 300px;
+
+ &:not(.fill-height) {
+ min-height: 200px;
+ }
}
}
}
diff --git a/ui-ngx/src/app/shared/components/json-object-edit.component.ts b/ui-ngx/src/app/shared/components/json-object-edit.component.ts
index 30d7483efb..498aca6173 100644
--- a/ui-ngx/src/app/shared/components/json-object-edit.component.ts
+++ b/ui-ngx/src/app/shared/components/json-object-edit.component.ts
@@ -19,21 +19,23 @@ import {
Component,
ElementRef,
forwardRef,
+ HostBinding,
Input,
OnDestroy,
OnInit,
- ViewChild
+ ViewChild,
+ ViewEncapsulation
} from '@angular/core';
import {
+ AbstractControl,
ControlValueAccessor,
- UntypedFormControl,
NG_VALIDATORS,
NG_VALUE_ACCESSOR,
- Validator,
- AbstractControl, ValidationErrors
+ UntypedFormControl,
+ ValidationErrors,
+ Validator
} from '@angular/forms';
import { Ace } from 'ace-builds';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
import { ActionNotificationHide, ActionNotificationShow } from '@core/notification/notification.actions';
import { Store } from '@ngrx/store';
import { AppState } from '@core/core.state';
@@ -48,6 +50,7 @@ export const jsonRequired = (control: AbstractControl): ValidationErrors | null
selector: 'tb-json-object-edit',
templateUrl: './json-object-edit.component.html',
styleUrls: ['./json-object-edit.component.scss'],
+ encapsulation: ViewEncapsulation.None,
providers: [
{
provide: NG_VALUE_ACCESSOR,
@@ -63,6 +66,8 @@ export const jsonRequired = (control: AbstractControl): ValidationErrors | null
})
export class JsonObjectEditComponent implements OnInit, ControlValueAccessor, Validator, OnDestroy {
+ @HostBinding('style.position') position = 'relative';
+
@ViewChild('jsonEditor', {static: true})
jsonEditorElmRef: ElementRef;