diff --git a/src/lib/color-picker.component.html b/src/lib/color-picker.component.html
index 7fbea32..fd425d2 100644
--- a/src/lib/color-picker.component.html
+++ b/src/lib/color-picker.component.html
@@ -2,7 +2,7 @@
   <div *ngIf="cpDialogDisplay=='popup'" class="arrow arrow-{{cpPosition}}" [style.top.px]="arrowTop"></div>
 
   <div *ngIf="(cpColorMode || 1) === 1" class="saturation-lightness" [slider] [rgX]="1" [rgY]="1" [style.background-color]="hueSliderColor" (newValue)="onColorChange($event)" (dragStart)="onDragStart('saturation-lightness')" (dragEnd)="onDragEnd('saturation-lightness')">
-    <div class="cursor" [style.top.px]="slider.v" [style.left.px]="slider.s"></div>
+    <div class="cursor" [style.top.px]="slider?.v" [style.left.px]="slider?.s"></div>
   </div>
 
   <div class="hue-alpha box">
@@ -20,15 +20,15 @@
       <div *ngIf="cpAlphaChannel==='disabled'" style="height: 16px;"></div>
 
       <div #hueSlider class="hue" [slider] [rgX]="1" [style.display]="(cpColorMode || 1) === 1 ? 'block' : 'none'" (newValue)="onHueChange($event)" (dragStart)="onDragStart('hue')" (dragEnd)="onDragEnd('hue')">
-        <div class="cursor" [style.left.px]="slider.h"></div>
+        <div class="cursor" [style.left.px]="slider?.h"></div>
       </div>
 
       <div #valueSlider class="value" [slider] [rgX]="1" [style.display]="(cpColorMode || 1) === 2 ? 'block': 'none'" (newValue)="onValueChange($event)" (dragStart)="onDragStart('value')" (dragEnd)="onDragEnd('value')">
-        <div class="cursor" [style.right.px]="slider.v"></div>
+        <div class="cursor" [style.right.px]="slider?.v"></div>
       </div>
 
       <div #alphaSlider class="alpha" [slider] [rgX]="1" [style.display]="cpAlphaChannel === 'disabled' ? 'none' : 'block'" [style.background-color]="alphaSliderColor" (newValue)="onAlphaChange($event)" (dragStart)="onDragStart('alpha')" (dragEnd)="onDragEnd('alpha')">
-        <div class="cursor" [style.left.px]="slider.a"></div>
+        <div class="cursor" [style.left.px]="slider?.a"></div>
       </div>
     </div>
   </div>
diff --git a/src/lib/color-picker.component.ts b/src/lib/color-picker.component.ts
index b08d514..27f099b 100644
--- a/src/lib/color-picker.component.ts
+++ b/src/lib/color-picker.component.ts
@@ -152,7 +152,7 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   ngAfterViewInit(): void {
-    if (this.cpWidth !== 230) {
+    if (this.cpWidth !== 230 || this.cpDialogDisplay === 'inline') {
       const hueWidth = this.hueSlider.nativeElement.offsetWidth || 140;
       const alphaWidth = this.alphaSlider.nativeElement.offsetWidth || 140;
 
@@ -285,10 +285,6 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
 
   public setInitialColor(color: any): void {
     this.initialColor = color;
-
-    if (this.cpDialogDisplay === 'inline') {
-      this.cdRef.detectChanges();
-    }
   }
 
   public setPresetConfig(cpPresetLabel: string, cpPresetColors: string[]): void {
@@ -382,12 +378,10 @@ export class ColorPickerComponent implements OnInit, OnDestroy, AfterViewInit {
   }
 
   public onFormatToggle(change: number): void {
-
     const availableFormats = this.dialogInputFields.length;
-    // Javascript modulo operation doesn't work that well with negative numbers, so we have to take
-    // things a bit further to get the proper behavior for negative wrap around.
-    const nextFormat = (((this.dialogInputFields.indexOf(this.format) + change) % availableFormats)
-        + availableFormats) % availableFormats;
+
+    const nextFormat = (((this.dialogInputFields.indexOf(this.format) + change) %
+      availableFormats) + availableFormats) % availableFormats;
 
     this.format = this.dialogInputFields[nextFormat];
   }