Closed demiavaliani closed 3 months ago
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.
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 thewrap
option is not set tofalse
(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.
@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 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 ofbody
.
Your selector doesn't appear to be the right one. It should be .color-picker
I believe.
I'm converting this into a discussion.
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
andbutton
elements should be wrapped inside a parent element with classclr-field
.Great library tho, thanks for your effort.