This is a migrated thread and some comments may be shown as answers.

I cannot select a manual color through the input

1 Answer 186 Views
ColorPicker
This is a migrated thread and some comments may be shown as answers.
Philippe
Top achievements
Rank 1
Philippe asked on 17 Apr 2014, 09:05 AM
I use the Kendo UI Web v2014.1.318.
I try with Firefox and Google Chrome.

I cannot select a manual color through the input.

When I open the color picker, the focus is done to an input before the color picker.
When I click in the color input, I cannot get the focus to enter the color.

01.<div class="silx-setting-settings-dialog ui-dialog-content ui-widget-content" id="ui-id-5" style="width: auto; min-height: 50px; max-height: none; height: auto;">
02.    <div class="silx-row">
03.      <label>!! Action label:</label>
04.      <input type="text" class="silx-setting input settingLabel" value="Systematic Rejection">
05.    </div>
06.   
07.    <script type="text/javascript">
08.       
09.        var as_Color = "#cccccc";
10.       
11.   
12.      $(".settingBackgroundColor").kendoColorPicker({
13.        value: as_Color,
14.        buttons: false,
15.        change: function(e) {
16.           $(".previewSettingImage").css("backgroundColor", e.value);
17.        },
18.        select: function(e) {
19.           $(".previewSettingImage").css("backgroundColor", e.value);
20.        }
21.      });
22.    </script>
23.    <div class="silx-row">
24.      <label>!! Background color:</label>
25.      <span role="textbox" aria-haspopup="true" class="k-widget k-colorpicker k-header" aria-disabled="false" tabindex="0" aria-label="Current selected color is #cccccc" aria-owns="6fb0d2e4-e256-4d54-9bb3-853eb40cdec6"><span class="k-picker-wrap k-state-default"><span class="k-selected-color" style="background-color: rgb(204, 204, 204);"></span><span class="k-select" unselectable="on"><span class="k-icon k-i-arrow-s" unselectable="on"></span></span></span><input class="silx-setting input settingBackgroundColor" data-role="colorpicker" style="display: none;"></span>
26.    </div>
27.   
28.    <script type="text/javascript">
29.      $(".settingImage").kendoComboBox({
30.        dataTextField: "text",
31.        dataValueField: "value",
32.  template: '<span class="k-state-default"><img width="26" height="26" src="/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/#:data.text#" alt="#:data.text#" /></span>',
33.        dataSource:
34.        [
35.          { text: "Systematic Rejection.png", value: "Systematic Rejection.png" },
36.          { text: "dashboard-exit.png", value: "dashboard-exit.png" },
37.          { text: "logo-vertech.png", value: "logo-vertech.png" }
38.        ],
39.        change: function(e) {
40.          $(".previewSettingImage").css("background-image", "url(/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/" + e.sender.input.val() + ")");
41.        }
42.      });
43.   
44.      var ao_KendoCombo = $("input.silx-setting.settingImage:hidden").data("kendoComboBox");
45.      ao_KendoCombo.value("Systematic Rejection.png");
46. 
47.      $(".addImageFile").kendoButton(
48.        {
49.          click: function(e) {
50.            UploadImageFile(e);
51.          }
52.        }
53.      );
54.    </script>
55.    <div class="silx-row">
56.      <label>!! Image:</label>
57.      <span class="k-widget k-combobox k-header silx-setting input settingImage" style=""><span tabindex="-1" unselectable="on" class="k-dropdown-wrap k-state-default"><input class="k-input silx-setting input settingImage" type="text" autocomplete="off" maxlength="524288" role="combobox" aria-expanded="false" tabindex="0" aria-disabled="false" aria-readonly="false" aria-autocomplete="list" aria-owns="" aria-busy="false" style="width: 100%;"><span tabindex="-1" unselectable="on" class="k-select"><span unselectable="on" class="k-icon k-i-arrow-s" role="button" tabindex="-1">select</span></span></span><input class="silx-setting input settingImage" data-role="combobox" aria-disabled="false" aria-readonly="false" style="display: none;"></span>
58.      <button type="button" class="addImageFile k-button" style="font-size:20px;line-height:20px;" data-role="button" role="button" aria-disabled="false" tabindex="0">...</button>
59.      <div class="previewSettingImage silc-action-button" style="background-color: rgb(204, 204, 204); float: right; margin-right: 175px; margin-top: 0px; background-image: url(http://192.168.1.185:8080/Root/Global/plugins/silx-extendable-dashboard/img/silcActions/dashboard-exit.png);"></div>
60.    </div>
61.   
62.    <div class="silx-row">
63.      <label>!! Order:</label>
64.      <input type="text" class="silx-setting input settingOrder" value="1">
65.    </div>
66.     
67.    <div class="silx-settings">
68.      <button class="silx-settings-cancel">Annuler</button>
69.      <button class="silx-settings-ok">Ok</button>
70.    </div></div>


Regards,
Michaƫl Gauthier

1 Answer, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 18 Apr 2014, 05:27 AM
Hi Philippe,

I have tried to reproduce the issue in the following example, but to no avail:

http://jsbin.com/xemam/1/edit

Can you please edit the above example, so it can show the exact issue that you are having? Once we are able to reproduce it, we can assist you further.

Thank you in advance for your cooperation.

Regards,
Kiril Nikolov
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ColorPicker
Asked by
Philippe
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or