Thumbnail Not Showing

[braitsch]

Hi, this widget is fantastic. Thanks for making this. I just added this to my project and I can't seem to get the thumbnail to appear. I don't have any CSS styling my inputs and I'm just using the default settings. Also I don't see anything in the readme on how to select between the various thumbnail styles in your examples e.g. rounded, circular, fullsize etc.

[Edit] I also just noticed it's not letting me change the defaultColor setting, however I am able to set custom swatches. I'm using this within a Vue3 app and wondering if that's creating a conflict somewhere, although I'm not seeing any JS errors anywhere.

[mdbassit]

As for the thumbnail styles, there are no options for it, you need to use CSS to do that. If you look at the code of the examples page, you should see how it's done. Here is an example:

.full .clr-field button {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

The defaultColor setting is only useful when using the color picker in inline mode. In normal mode, the color picker reads the default color from the value of the input field it's attached to.

I don't know why the thumbnail doesn't appear for you. Can you setup a demo page where I can look at your code?

[braitsch]

Thanks for responding. I wound up just appending a div to the side of the input field to show the color swatch and updating its background color when the input field value changes. I didn't think to view the source of the examples page to see how you were creating the thumbnails, I assumed they were set via options passed to the Coloris constructor. I think it'd be helpful to add a note to the readme that the thumbnails need to be set w/ additional CSS. Thanks again for making this!