How do you add a custom input?

[hussain-attari]

I am trying to open the color picker on this input.

<button
    class="toolbar-button inline-flex w-full text-center items-center px-1 py-1 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
    <svg width="16px" height="16px" viewBox="0 0 16 16" style="margin-bottom: -2px;">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <rect stroke="#FADB14" stroke-width="0.5" fill="#FADB14" x="2" y="12.75" width="12" height="1.5" rx="0.125">
            </rect>
            <g transform="translate(2.781250, 1.375000)" fill-rule="nonzero">
                <path fill="#595959"
                    d="M2.86079849,6.64817222 L2.05713835,5.84451208 C2.00832281,5.79569655 2.00832281,5.71655092 2.05713835,5.66773539 L3.61029491,4.11457882 L3.11963835,3.62392225 C3.07082281,3.57510672 3.07082281,3.49596109 3.11963835,3.44714556 L6.47839556,0.0883883476 C6.52721109,0.0395728112 6.60635672,0.0395728112 6.65517225,0.0883883476 L11.5165314,4.94974747 C11.5653469,4.998563 11.5653469,5.07770863 11.5165314,5.12652416 L8.15777416,8.48528137 C8.10895863,8.53409691 8.029813,8.53409691 7.98099747,8.48528137 L7.38889678,7.89318068 L5.83574021,9.44633725 C5.78692467,9.49515278 5.70777905,9.49515278 5.65896351,9.44633725 L5.0267407,8.81411444 L4.48856529,9.35326519 C4.39477378,9.44720966 4.26747335,9.5 4.13472392,9.5 L0.608857988,9.5 C0.470786801,9.5 0.358857988,9.38807119 0.358857988,9.25 C0.358857988,9.18363253 0.385247413,9.11998865 0.432210608,9.07309408 L2.86079849,6.64817222 Z M6.56678391,1.67937861 L4.71062861,3.53553391 L8.06938582,6.89429112 L9.92554112,5.03813582 L6.56678391,1.67937861 Z M3.64812861,5.75612373 L5.74735186,7.85534699 L6.54284699,7.05985186 L4.44362373,4.96062861 L3.64812861,5.75612373 Z"
                    id="Combined-Shape"></path>
            </g>
        </g>
    </svg>
    <i class="fa-light fa-chevron-down text-xs pl-2"></i>
</button>

How do I achieve it?

[mdbassit]

I would not recommend using a button to open the color picker, you should use an input field.
But if you must use a button, you need to set wrap to false in the settings.

[hussain-attari]

Hi,

You are right I needed the input field however I was trying to implement it in my wysiwyg editor and showing the input field on the toolbar would not be a good ui element.

I fiddled and played around with your default CSS a little bit to make a few elements invisible and to reduce the input width and height. Then used the flex box technique as shown here to achieve the desired toolbar layout.

So now my toolbar displays an icon but has the Coloris input field below it.

[mdbassit]

You were able to solve your problem then?

[hussain-attari]

Hi,

yes I solved the problem.

Also is there a way to auto reverse the layout for the polaroid theme if there is now space?

[mdbassit]

I'm afraid there isn't.

[indigotechtutorials]

wow this is old! I want to do a similar thing by having a color picker pop up on top of a div.

I would think it should be simple to attach this color picker to clicking on any element but I'm not seeing an option to even programmatically open the color picker

[mdbassit]

If you want the color picker to always be visible inside a div, you can use it in inline mode:

Coloris({
  parent: '#my-div',
  inline: true,
});

Otherwise, you need to add an input field inside your div and attach the color picker to it. This will cause the color picker to open when you focus said input field:

Coloris({
  el: '#my-input-field'
});

[indigotechtutorials]

Ok nice so you can do inline mode as well that is cool.

I was specifically curious about using it on other elements besides an input for example... Like just having a div for example that when u click on it it pops open the color picker and then once I select the value I could just use JS events to handle catching that value and doing what I need with it.

Is it possible to hide the input and still use it secretly? I attempted something like that without success

[indigotechtutorials]

This is how I am doing it now which actually works fine with me I'm not too concerned on UI at the moment and the ability to make the color picker use HSL is great! Hopefully we get OKLCH sometime down the road because that would be fun to mess with! Thanks for your work on this project. It works great with my tech stack Ruby on Rails