ColorPicker value method doesn't work inside hidden boostrap modal

[Brad]

     I have a bootstrap modal window that is set to be shown when a button on the page is clicked. Immediately after the javascript to show the window, I have tried to set the value of a ColorPicker which sits inside the modal div. However, the value method doesn't move the ColorPicker's cursor if done this way and it always shows up in the top-left corner. The only way I've seen to get around this limitation is by setting the ColorPicker's value in the shown.bs.modal function, after the modal has completely finished being shown. Unfortunately, this causes the modal to be displayed first and then the value is updated shortly afterwards (~half a second later) and is quite visible to the user. This oddity is also shared by the ColorPicker's slider, whose width is for some reason set to a length much too short for its container and the only way I've found to fix it is by setting the width in the same shown.bs.modal function (with the same unfortunate side-effect).

 

Is this by design or is there a correct way to do this? I've tried searching the forums but I couldn't find anyone with similar problems.

[Neli]

Hello Brad,

I have tested the behavior of the ColorPicker nested in bootstrap modal window.
I would suggest you to use the value configuration in order to set the initial color in the ColorPicker.

$("#colorpicker").kendoColorPicker({
  value: "blue"
});

I have tested also changing of the color by using the value method on loading the page. Using this approach the color is changed correctly on my end

$("#colorpicker").data('kendoColorPicker').value('pink');

Here is a Dojo example where the color of the ColorPicker is set by using the value method.  

Regards,
Neli
Progress Telerik

[Brad]

I'm terribly sorry as it seems I have made a false assumption. I'm actually using kendoFlatColorPicker in my project and I had falsely assumed (without checking) that kendoColorPicker and kendoFlatColorPicker functioned the same way. If you take the example you linked to and changed it to use kendoFlatColorPicker, you can see the issue I was describing.

 

$("#colorpicker").kendoFlatColorPicker({
  value: "blue"
});
$("#colorpicker").data('kendoFlatColorPicker').value('pink');

[Neli]

Hi Brad,

I changed the widget to FlatColorPicker, but still I did not manage to reproduce the issue. Here you will find the modified example. Also I have prepared a screencast video where you could see the behavior on my end.

May I ask you to modify the sample in order to replicate the described problem? If it is more convenient for you you could prepare an isolated sample where the problem is replicated and send it back to us. Thus, we could inspect it locally and advise you further. 

Regards,
Neli
Progress Telerik

[Brad]

I've updated the example to highlight the issue as a side-by-side comparison here. I copied the colorPicker div and placed it outside the modal so that it initializes normally. The div moves in/out of the modal on open/close to show the differences side-by-side. Also, I've bound the change function on the new picker to the value of the modal picker. If you change the value on the new picker while the modal is closed, the modal picker's drag handle returns to the top-left corner. If you open the modal and then change the new picker's value, both pickers' handles stay in sync.

Just to be clear, the issues I'm seeing are:

1. The drag handle in the hsv rectangle is in the top-left corner instead of where it should be
2. The hue slider at the bottom is the wrong size

[Brad]

It looks like the issue is relating to the 'modal' class having display:none and some part of the initialization makes use of the element's size on the DOM. I was able to work around the issue by attaching the color picker div to the body tag, initializing the kendoFlatColorPicker, and then moving it back. Also, I'm doing the same thing for setting the value every time the modal is opened.

if (!this.colorPicker) {
    var parent = $('#colorPicker').parent();
    $('#colorPicker').detach().appendTo('body');
    $('#colorPicker').kendoFlatColorPicker({
        preview: false,
        value: '#FFFFFF',
        change: this.setHex
    });
    $('#colorPicker').detach().appendTo(parent);
    this.colorPicker = $('#colorPicker').data('kendoFlatColorPicker');

    var self = this;
    $('#colorsGridModal').on('show.bs.modal', function (e) {
        $('#colorPicker').detach().appendTo('body');
        self.setPicker();
        $('#colorPicker').detach().appendTo(parent);
    });
}

[Veselin Tsvetanov]

Hi Brad,

You are perfectly right. Initializing the FlatColourPicker in a hidden container (or a container with zero height / width) will not allow the widget to properly calculate the size of its slider and the position of the selection circle. Your workaround to initialize the picker in the body and then move it to the hidden container is appropriate for the discussed case. Also, as you have suggested, changing the value should also happen outside of that container.

Regards,
Veselin Tsvetanov
Progress Telerik