diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
index a9056ec8f8..aa9d316ef0 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/digital-gauge.models.ts
@@ -162,10 +162,10 @@ export const backwardCompatibilityTicks = (ticksValue: AttributeSourceProperty[]
   return ticks;
 };
 
-export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaugeSettings, keyColor?: string) => {
+export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaugeSettings, defaultColor?: string) => {
   if (settings.barColor) {
     if (!settings.barColor.color) {
-      settings.barColor.color = keyColor;
+      settings.barColor.color = defaultColor;
     }
     if (isDefinedAndNotNull(settings.barColor.gradient)) {
       settings.barColor.gradient.minValue = settings.minValue;
@@ -174,7 +174,7 @@ export const convertLevelColorsSettingsToColorProcessor = (settings: DigitalGaug
       settings.barColor.gradient = defaultGradient(settings.minValue, settings.maxValue);
     }
   } else {
-    settings.barColor = constantColor(keyColor);
+    settings.barColor = constantColor(defaultColor);
     if (settings.fixedLevelColors?.length) {
       settings.barColor.rangeList = {
         advancedMode: settings.useFixedLevelColor,
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts
index 65e6c3f028..c12ba38718 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-range-list.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, forwardRef, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, forwardRef, Input, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -62,7 +62,8 @@ export function advancedRangeValidator(control: AbstractControl): ValidationErro
       useExisting: forwardRef(() => ColorRangeListComponent),
       multi: true
     }
-  ]
+  ],
+  encapsulation: ViewEncapsulation.None
 })
 export class ColorRangeListComponent implements OnInit, ControlValueAccessor, OnDestroy {
 
@@ -110,7 +111,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     ).subscribe(() => this.updateModel());
     this.colorRangeListFormGroup.get('advancedMode').valueChanges.pipe(
       takeUntil(this.destroy$)
-    ).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0));
+    ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
   }
 
   ngOnDestroy() {
@@ -174,7 +175,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
 
   public removeAdvancedRange(index: number) {
     (this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray).removeAt(index);
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   get advancedRangeFormArray(): UntypedFormArray {
@@ -188,7 +189,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
   removeRange(index: number) {
     this.rangeListFormArray.removeAt(index);
     this.colorRangeListFormGroup.markAsDirty();
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   rangeDrop(event: CdkDragDrop<string[]>, range: string) {
@@ -211,7 +212,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
     const advancedRangeColorsArray = this.colorRangeListFormGroup.get('rangeAdvanced') as UntypedFormArray;
     const advancedRangeColorControl = this.fb.control(advancedRange, [advancedRangeValidator]);
     advancedRangeColorsArray.push(advancedRangeColorControl);
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   addRange() {
@@ -223,7 +224,7 @@ export class ColorRangeListComponent implements OnInit, ControlValueAccessor, On
       };
       this.rangeListFormArray.push(this.colorRangeControl(newRange));
       this.colorRangeListFormGroup.markAsDirty();
-      setTimeout(() => {this.popover?.updatePosition();}, 0);
+      Promise.resolve().then(() => this.popover?.updatePosition());
     }
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
index 99260154df..89edf5323a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/color-settings-panel.component.ts
@@ -20,7 +20,8 @@ import {
   ColorSettings,
   ColorType,
   colorTypeTranslations,
-  defaultGradient, defaultRange
+  defaultGradient,
+  defaultRange
 } from '@shared/models/widget-settings.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { UntypedFormBuilder, UntypedFormGroup } from '@angular/forms';
@@ -107,7 +108,7 @@ export class ColorSettingsPanelComponent extends PageComponent implements OnInit
       }
     );
     this.colorSettingsFormGroup.get('type').valueChanges.subscribe(() => {
-      setTimeout(() => {this.popover?.updatePosition();}, 0);
+      Promise.resolve().then(() => this.popover?.updatePosition());
     });
   }
 
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
index 979bc1a706..8b78190f5a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/settings/common/gradient.component.ts
@@ -119,7 +119,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
     ).subscribe(() => this.updateModel());
     this.gradientFormGroup.get('advancedMode').valueChanges.pipe(
       takeUntil(this.destroy$)
-    ).subscribe(() => setTimeout(() => {this.popover?.updatePosition();}, 0));
+    ).subscribe(() => Promise.resolve().then(() => this.popover?.updatePosition()));
   }
 
   ngOnDestroy() {
@@ -233,7 +233,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       this.gradientListFormArray.removeAt(index);
     }
     this.gradientFormGroup.markAsDirty();
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   gradientDrop(event: CdkDragDrop<string[]>, advanced = false) {
@@ -252,7 +252,7 @@ export class GradientComponent implements OnInit, ControlValueAccessor, OnDestro
       this.gradientListFormArray.push(this.colorGradientControl('rgba(0,0,0,0.87)'));
     }
     this.gradientFormGroup.markAsDirty();
-    setTimeout(() => {this.popover?.updatePosition();}, 0);
+    Promise.resolve().then(() => this.popover?.updatePosition());
   }
 
   updateModel() {