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.