Missing info in docs about setting up thumbnails

[demiavaliani]

I had too look in past issues to find out that thumbnail is not set up out of the box. I think it should be added in the docs that input and button elements should be wrapped inside a parent element with class clr-field.

<div class="clr-field">
	<button type="button" />
	<input data-coloris />
</div>

Great library tho, thanks for your effort.

[mdbassit]

The thumbnail IS set up out of the box. You do not need to manually wrap the input field.
If you are using a custom selector for the el option, make sure the wrap option is not set to false (or don't set it at all). If that is not the case for you, then there is something else interfering with it.

[demiavaliani]

The thumbnail IS set up out of the box. You do not need to manually wrap the input field. If you are using a custom selector for the el option, make sure the wrap option is not set to false (or don't set it at all). If that is not the case for you, then there is something else interfering with it.

I am using custom selector for el, and wrap set to true, but display: none does not change on the #clr-picker element. With clr-field wrapper, I can see that clr-open class is being appended on input click, which is not the case when without wrapper.

I'll try to reproduce it somewhere.

[demiavaliani]

@mdbassit never mind the previous comment, could not reproduce it, so it's an issue on my side. But I managed to reproduce the thumbnail issue.

Additionally, you can observe that even if I'm setting custom parent element, the color picker is still appended to the end of body.

https://codesandbox.io/p/devbox/suspicious-colden-c2cfq2?file=%2Fsrc%2FApp.vue%3A10%2C65

[mdbassit]

@mdbassit never mind the previous comment, could not reproduce it, so it's an issue on my side. But I managed to reproduce the thumbnail issue.

Your input field is not yet in the DOM when Coloris is initialized, so it doesn't get wrapped. You will have to wrap it manually:

Coloris.wrap('.color-picker__input');

Additionally, you can observe that even if I'm setting custom parent element, the color picker is still appended to the end of body.

Your selector doesn't appear to be the right one. It should be .color-picker I believe.

I'm converting this into a discussion.