add style to bring drop down to the foreground in the drawer dialog

Cumulocity-IoT · Nov 27, 2024 · 8478fa6 · 8478fa6
1 parent a813002
commit 8478fa6
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 16 deletions.
diff --git a/dynamic-mapping-ui/src/mapping/shared/mapping.style.css b/dynamic-mapping-ui/src/mapping/shared/mapping.style.css
@@ -62,18 +62,6 @@ json-editor > div {
   top: -20px;
 }
 
-.animation-slow {
-  animation-duration: 2s;
-}
-
-.animate-background {
-  animation-name: background-color;
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-direction: alternate-reverse;
-  animation-timing-function: ease;
-}
-
 @keyframes background-color {
   from {
     background-color: var(--brand-light, var(--c8y-brand-light));

diff --git a/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.ts b/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.component.ts
@@ -44,7 +44,7 @@ import { ConnectorConfigurationComponent } from '../../shared/connector-configur
 @Component({
   selector: 'd11r-mapping-connector',
   templateUrl: 'mapping-connector.component.html',
-  styleUrls: ['../shared/mapping.style.css'],
+  styleUrls: ['../shared/mapping.style.css', './mapping-connector.style.css'],
   encapsulation: ViewEncapsulation.None
 })
 export class MappingConnectorComponent implements OnInit, OnDestroy {

diff --git a/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.style.css b/dynamic-mapping-ui/src/mapping/step-connector/mapping-connector.style.css
@@ -0,0 +1,6 @@
+
+/* bring dropdown to the top of the modal dialog */
+body > bs-dropdown-container  {
+    z-index: 1056 !important;
+    position: relative;
+}
diff --git a/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts b/dynamic-mapping-ui/src/mapping/stepper-mapping/mapping-stepper.component.ts
@@ -247,7 +247,7 @@ export class MappingStepperComponent implements OnInit, OnDestroy {
             wrappers: ['custom-form-field'],
             templateOptions: {
               label: 'Source Expression',
-              class: 'input-sm disabled-animate-background',
+              class: 'input-sm',
               customWrapperClass: 'm-b-24',
               disabled:
                 this.stepperConfiguration.editorMode == EditorMode.READ_ONLY ||
@@ -275,7 +275,7 @@ export class MappingStepperComponent implements OnInit, OnDestroy {
                   model.pathSource == '' &&
                   model.stepperConfiguration.allowDefiningSubstitutions
                 ) {
-                  return 'input-sm disabled-animate-background';
+                  return 'input-sm';
                 } else {
                   return 'input-sm';
                 }
@@ -314,7 +314,7 @@ export class MappingStepperComponent implements OnInit, OnDestroy {
                   model.pathTarget == '' &&
                   model.stepperConfiguration.allowDefiningSubstitutions
                 ) {
-                  return 'input-sm disabled-animate-background';
+                  return 'input-sm';
                 } else {
                   return 'input-sm';
                 }