Tui.image-editor: The color picker slider does not appear

[nao-pon]

Version

v3.5.1

Development Environment

Chrome on Windows

Current Behavior

The color picker slider does not appear. Also, if CSS is adjusted and displayed, the color gradation image is not displayed.

Expected Behavior

A color slider should be displayed when you click on the color field of the color picker.

[NikhilGangurde]

any progress on this issue I am facing the similar issue.

Image :

[slightlynerd]

I'm currently still having this issue. Is there a workaround for the time being? @junghwan-park

[slightlynerd]

Any hope of this getting resolved soon or is there a workaround @junghwan-park ?

[slightlynerd]

For anyone still experiencing this issue, I managed to resolve it like so:

.tui-image-editor-container .color-picker-control .tui-colorpicker-palette-button {
    font-size: 4px !important;
    border-radius: 50% !important;
    height: 16px;
}

You would also need to add this for the color picker container:

.tui-image-editor-container .color-picker-control {
    width: auto!important;
}

Here's the result:

[kritollm]

Include this in the head of your html:

<link type="text/css" href="https://uicdn.toast.com/tui-color-picker/v2.2.3/tui-color-picker.css" rel="stylesheet">

or copy the tui-color-picker.css from the tui-color-picker npm package. I am not sure if this is omitted from the documentation or whether it is intended to load automatically from the script.

[nao-pon]

v3.8.0 As of now, the following snippets can be used to display a color sledder. I'm using jQuery.

// Note: $base is container jQuery object of TUI Image Editor 
$base.find('.tui-colorpicker-palette-container').on('click', '.tui-colorpicker-palette-preview', function() {
    $(this).closest('.color-picker-control').height('auto').find('.tui-colorpicker-slider-container').toggle();
});
$base.on('click', function() {
    $base.find('.tui-colorpicker-slider-container').hide();
});

[medTL]

v3.8.0 As of now, the following snippets can be used to display a color sledder. I'm using jQuery.

// Note: $base is container jQuery object of TUI Image Editor 
$base.find('.tui-colorpicker-palette-container').on('click', '.tui-colorpicker-palette-preview', function() {
    $(this).closest('.color-picker-control').height('auto').find('.tui-colorpicker-slider-container').toggle();
});
$base.on('click', function() {
    $base.find('.tui-colorpicker-slider-container').hide();
});

how to make it work in angular?

[skyturks]

v3.8.0 As of now, the following snippets can be used to display a color sledder. I'm using jQuery.

// Note: $base is container jQuery object of TUI Image Editor 
$base.find('.tui-colorpicker-palette-container').on('click', '.tui-colorpicker-palette-preview', function() {
    $(this).closest('.color-picker-control').height('auto').find('.tui-colorpicker-slider-container').toggle();
});
$base.on('click', function() {
    $base.find('.tui-colorpicker-slider-container').hide();
});

How to make it work in react?

[jinwoo-kim-nhn]

The detail button is intentionally hidden, so it is not a bug. However, we plan to improve the detail button in the future.

[smartfit-joonhok]

@skyturks
Just import color picker css file as well.
import "tui-color-picker/dist/tui-color-picker.css";

I think this should be documented in the project's README page as well.