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;