I cannot select a manual color through the input

2 posts, 0 answers
  1. Philippe
    Philippe avatar
    6 posts
    Member since:
    May 2013

    Posted 17 Apr 2014 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2565 posts

    Posted 18 Apr 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
Back to Top