search

mdbassit / Coloris

A lightweight and elegant JavaScript color picker. Written in vanilla ES6, no dependencies. Accessible.
https://coloris.js.org/examples.html
MIT License
443 stars 58 forks source link

Bug: problem with inline mode #156

Closed AkramiPro closed 1 month ago

AkramiPro commented 1 month ago

GIF 2024-07-20 22-37-49

reproduced in this demo:

https://codepen.io/AkramiPro/pen/OJeNorz

pr: #155

mdbassit commented 1 month ago

This will fix your problem: https://codepen.io/mbassit/pen/xxoVyPq

I basically just added a child div inside .form-color-picker-wrap and called it .form-color-picker-wrap-inner and gave it a width of 100%. I set the new div as the parent element of the color picker. The button on the left side and the gap property were interfering with the calculation of the position.

AkramiPro commented 1 month ago

Thanks for your reply. but it is not better to support all situations ? I think it is better to handle it on the js side instead of the client side.

mdbassit commented 1 month ago

Your PR fixes your use case but breaks the marker position for other cases. This tool is already being used in production, so any modification has to be thoroughly tested.

AkramiPro commented 1 month ago

you right i will make a new pr after i test all possible ways thanks for help