1

I implemented Spectrum Color Picker. There is a slight change I want to make. The black dot that you can drag to select a color, the class name is sp-dragger. I want to edit the source file so that when you drag the black dot all the way to the side, (top, right, bottom and left side,) anything from the border of the class name sp-color and on, should hide the black dot.

enter image description here

(Image is from Adobe Illustrator)

I think the way to do this would be to create a div, or use an existing div, and make the z-index higher than the black dot.

JSFiddle

JavaScirpt Source

CSS Source

Horay
  • 1,388
  • 2
  • 19
  • 36

1 Answers1

3

Look for this part in the css source:

.sp-color {
    position: absolute;
    top:0;
    left:0;
    bottom:0;
    right:20%;

   /* Then add this line */
   overflow: hidden;
}

So the content doesn't bleed outside its edge.

AVAVT
  • 7,058
  • 2
  • 21
  • 44
  • Thanks! That works! Can you explain how that worked? – Horay Dec 06 '15 at 21:17
  • 1
    If you inspect the html of the color picker you can see that the black dot is a child element of the color panel - which has the class sp-color. So CSS has a feature fit your situation perfectly, that is `overflow: hidden`, which hide all child content that extends outside an element's boundaries. – AVAVT Dec 07 '15 at 04:33
  • Got it! Genius solution! – Horay Dec 07 '15 at 05:13