Repository navigation
Missing info in docs about setting up thumbnails #146
Description
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.
Activity
mdbassit commentedon May 16, 2024
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
eloption, make sure thewrapoption 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.demiavaliani commentedon May 20, 2024
I am using custom selector for
el, andwrapset totrue, butdisplay: nonedoes not change on the#clr-pickerelement. Withclr-fieldwrapper, I can see thatclr-openclass is being appended on input click, which is not the case when without wrapper.I'll try to reproduce it somewhere.
demiavaliani commentedon May 20, 2024
@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
parentelement, the color picker is still appended to the end ofbody.https://codesandbox.io/p/devbox/suspicious-colden-c2cfq2?file=%2Fsrc%2FApp.vue%3A10%2C65
mdbassit commentedon May 20, 2024
Your input field is not yet in the DOM when
Colorisis initialized, so it doesn't get wrapped. You will have to wrap it manually:Your selector doesn't appear to be the right one. It should be
.color-pickerI believe.I'm converting this into a discussion.