Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Color picker not working while changing location #23

Closed
Kazem-ma79 opened this issue Nov 21, 2021 · 7 comments
Closed

Color picker not working while changing location #23

Kazem-ma79 opened this issue Nov 21, 2021 · 7 comments

Comments

@Kazem-ma79
Copy link

Kazem-ma79 commented Nov 21, 2021 •
edited

I put input in a center aligned flex division but clr-picker is out of my div.
when removing it's top and left style, it's in correct position but color picker not working fine and should use it's previous position to select color.

Update: I want color picker to be always visible.
@melloware
Copy link
Contributor

Can you provide and html snippet or code sandbox reproducer so we can see the issue?

@Kazem-ma79
Copy link
Author

Kazem-ma79 commented Nov 22, 2021 •
edited

Can you provide and html snippet or code sandbox reproducer so we can see the issue?


<body>
    <div class="container">
        <div class="colorContainer">
            <div>
                <input type="text" class="clr" value="rgb(255, 0, 0)">
                <p id="valueRGB"></p>
                <button id="parser">Parse</button>
            </div>
        </div>

.colorContainer {
    display: flex;
    overflow: scroll;
    width: 80vw;
    height: 80vh;
}

.clr {
    opacity: 0;
}

and removed top, left, position of #clr-picker element.

I think the problem refers to moveMarker function.

@mdbassit
Copy link
Owner

Update: I want color picker to be always visible.

Unfortunately, this color picker is not designed to be always visible, and It will take a lot of hacky tricks to make that happen. If you absolutely need a color picker that's always visible, I don't think this tool is right for you.

If you explain clearly what you are trying to achieve, we might be able to help.

@Kazem-ma79
Copy link
Author

Update: I want color picker to be always visible.

Unfortunately, this color picker is not designed to be always visible, and It will take a lot of hacky tricks to make that happen. If you absolutely need a color picker that's always visible, I don't think this tool is right for you.

If you explain clearly what you are trying to achieve, we might be able to help.

I couldn't find another tool and this one is very beautiful.
My project has a color picker as the main part and some other input components, if I use a hidden color picker my UI looks very empty. So I need a always visible color picker.
This is okay but only problem is that when I remove it's left & top style rules, the picker gets corrupted and need to move mouse outside of color picker to change the color.

@mdbassit
Copy link
Owner

Here is a modified version that doesn't hide the picker coloris-static.zip.

@jepsar
Copy link
Contributor

jepsar commented Dec 3, 2021 •
edited

For me, having a static color picker would be a great feature. From my side a +1 on that.

To elaborate a bit, in case of static I don't want an input field to be visible. It can either be a hidden input, or simply having to listen for color picks. Also, I'd like the picker to be displayed inline in that case. The inline part makes this a new issue I guess. I'll create one for it.

@mdbassit
Copy link
Owner

mdbassit commented Dec 7, 2021

Since you opened another issue for this topic, I will close this one.

@mdbassit mdbassit closed this as completed Dec 7, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@melloware @mdbassit @jepsar @Kazem-ma79