diff --git a/example/src/app/app.component.html b/example/src/app/app.component.html index 379f23e..e642d83 100644 --- a/example/src/app/app.component.html +++ b/example/src/app/app.component.html @@ -347,6 +347,7 @@

by Alberto Pujante

<span [(colorPicker)]="arrayColors[selectedColor]" [cpDialogDisplay]="'inline'" [style.background]="arrayColors[selectedColor]" + [cpCancelButton]="true" [cpToggle]="true"></span> <div [style.background]="arrayColors['color']" diff --git a/src/lib/color-picker.component.scss b/src/lib/color-picker.component.scss index e0d3463..247075d 100644 --- a/src/lib/color-picker.component.scss +++ b/src/lib/color-picker.component.scss @@ -44,8 +44,6 @@ width: 230px; height: auto; border:#777 solid 1px; - left:30px; - top:250px; position:absolute; z-index:100000; background-color: #fff; @@ -219,6 +217,7 @@ left: 8px; position:absolute; @include border-radius(50%); + border: 1px solid #a9a9a9; } .selected-color-background{ diff --git a/src/lib/color-picker.component.ts b/src/lib/color-picker.component.ts index 98108f8..379188e 100644 --- a/src/lib/color-picker.component.ts +++ b/src/lib/color-picker.component.ts @@ -264,12 +264,16 @@ export class ColorPickerComponent implements OnInit, AfterViewInit { onResize() { if (this.position === 'fixed') { this.setDialogPosition(); - } else { - this.closeColorPicker(); + } else if (this.cpDialogDisplay !== 'inline') { + this.closeColorPicker(); } } setDialogPosition() { + if (this.cpDialogDisplay === 'inline') { + this.position = 'relative'; + return; + } let dialogHeight = this.dialogElement.nativeElement.offsetHeight; let node = this.directiveElementRef.nativeElement.parentNode, position = 'static', transform = ''; let parentNode: any = null, transformNode: any = null, style: any = null;