Merge pull request #189 from OS2iot/hotfix/firefox-styling

IOT-1522: Hotfix/firefox styling

Author: fcv-iteratorIt

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.html

@@ -1,7 +1,7 @@
 <div class="container-fluid">
   <div class="row">
     <div class="col-md-6 d-flex align-items-stretch">
-      <div class="jumbotron jumbotron--full-width">
+      <div class="jumbotron jumbotron--full-width width100percent">
         <div class="d-flex align-items-start justify-content-between">
           <h3>{{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}</h3>
           <div class="spinner-placeholder">
@@ -51,36 +51,36 @@ <h3>{{ "DATATARGET.TEST_CONNECTION.TEST-CONNECTION" | translate }}</h3>
       </div>
     </div>
     <div class="col-md-6 d-flex align-items-stretch min-height-400">
-      <div class="jumbotron jumbotron--full-width">
+      <div class="jumbotron jumbotron--full-width width100percent">
         <h3>{{ "DATATARGET.TEST_CONNECTION.CHOSEN-DATA-PACKAGE" | translate }}</h3>
         <ngx-monaco-editor
           [(ngModel)]="payloadData"
           [ngModelOptions]="{ standalone: true }"
-          [options]="editorJsonOutpuOptions"
+          [options]="editorJsonInputOptions"
           class="height-85"
         >
         </ngx-monaco-editor>
       </div>
     </div>
     <div class="col-md-6 d-flex align-items-stretch min-height-400">
-      <div class="jumbotron jumbotron--full-width">
+      <div class="jumbotron jumbotron--full-width width100percent">
         <h3>{{ "DATATARGET.TEST_CONNECTION.SENT-DECODED-REQUEST" | translate }}</h3>
         <ngx-monaco-editor
           [(ngModel)]="decodedData"
           [ngModelOptions]="{ standalone: true }"
-          [options]="editorJsonOutpuOptions"
+          [options]="editorJsonOutputOptions"
           class="height-85"
         >
         </ngx-monaco-editor>
       </div>
     </div>
     <div class="col-md-6 d-flex align-items-stretch min-height-400">
-      <div class="jumbotron jumbotron--full-width">
+      <div class="jumbotron jumbotron--full-width width100percent">
         <h3>{{ "DATATARGET.TEST_CONNECTION.RECEIVED-RESPONSE" | translate }}</h3>
         <ngx-monaco-editor
           [(ngModel)]="testResponse"
           [ngModelOptions]="{ standalone: true }"
-          [options]="editorJsonOutpuOptions"
+          [options]="editorJsonOutputOptions"
           class="height-85"
         >
         </ngx-monaco-editor>

src/app/applications/datatarget/datatarget-test-connection/datatarget-test-connection.component.ts

@@ -19,14 +19,22 @@ import { TranslateService } from "@ngx-translate/core";
   styleUrl: "./datatarget-test-connection.component.scss",
 })
 export class DatatargetTestConnectionComponent implements OnInit, OnDestroy {
-  editorJsonOutpuOptions = {
+  editorJsonOutputOptions = {
     theme: "vs",
     language: "json",
     autoIndent: true,
     roundedSelection: true,
     minimap: { enabled: false },
     readOnly: true,
   };
+  editorJsonInputOptions = {
+    theme: "vs",
+    language: "json",
+    autoIndent: true,
+    roundedSelection: true,
+    minimap: { enabled: false },
+    readOnly: false,
+  };
 
   public iotDevices: IotDevice[];
   public payloadDecoders: PayloadDecoderMinimal[];