Color Picker Editor Template in Grid has issues in IE 11

[Jark Monster]

I'm not sure if this post would be better suited in the Grid forum or the Color Picker forum, so I apologize if I chose the wrong location.

Kendo UI Version: 2013.3.1119
I am using the ASP.NET MVC markup for the grid

I have a grid that is using batch editing which has a cell that has an editor template that is an HSV Color Picker.
When I select the cell for editing, the widget is fine in all browsers except IE 11.

In IE 11, the widget loads correctly and also opens correctly, but the issue comes when I attempt to change the color by clicking on the drag handler to move it around the canvas on the screen.  I've included images of the before and after, but basically, the drag handler loads in the correct location, but when it is clicked, it immediately 'jumps' to the far left side of the page and refuses to drag to the right unless I take the cursor way to the right of the widget.

Here is my grid code and my detail template information.  Please let me know if you need any more information.

<script type="text/javascript">
    function RefCarrierRank_ErrorHandler(e) {
    }

    function RefCarrierRankEdit(e) {
        if (e.container[0].cellIndex == 2) {
            $(".k-selected-color").css("width", "100%");
            $("#RankColor").data("kendoColorPicker").open();
        }
    }
</script>

<div id="RefCarrierRankContainer">
    <h3 style="margin:1px;">Rank Dictionary</h3>

    @(Html.Kendo().Grid(Model.AdminModel.GlobalDictionary.RefCarrierRankModels)
        .Name("RefCarrierRank")
        .Columns(columns =>
        {
            columns.Bound(item => item.Name);
            columns.Bound(item => item.Rank)
                .EditorTemplateName("RefCarrierRank/Rank");
            columns.Bound(item => item.RankColor)
                .ClientTemplate("<div class='k-textbox' style='background-color:#=RankColor#; width:80px; height:20px;'></div>")
                .EditorTemplateName("RefCarrierRank/RankColor").Width(100);
            columns.Command(command =>
            {
                command.Destroy();
            }).Width(100);
        })
        .ToolBar(toolbar =>
        {
            toolbar.Create();
            toolbar.Save();
        })
        .Events(events =>
        {
            events.Edit("RefCarrierRankEdit");
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
        .Navigatable(navigatable => navigatable.Enabled(true))
        .Pageable(pageAction =>
        {
            pageAction.PageSizes(new int[] { 5, Model.AdminModel.GlobalDictionary.RefCarrierRankModels.Count });
        })
        .Sortable()
        .Scrollable()
        .Filterable()
        .Resizable(resize => resize.Columns(true))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(false)
            .Events(events =>
            {
                events.Error("RefCarrierRank_ErrorHandler");
            })
            .Sort(sort =>
            {
                sort.Add("Rank").Ascending();
            })
            .Model(model =>
            {
                model.Id(i => i.RefCarrierRankID);
                model.Field(i => i.Rank).DefaultValue(Model.AdminModel.GlobalDictionary.RefCarrierRankModels.Max(i => i.Rank) + 1);
                model.Field(i => i.RankColor).DefaultValue("#a8a8a8");
            })
            .Read(read => read.Action("GetRefCarrierRanks", "Dictionary"))
            .Create(create => create.Action("CreateRefCarrierRanks", "Dictionary"))
            .Update(update => update.Action("UpdateRefCarrierRanks", "Dictionary"))
            .Destroy(delete => delete.Action("DeleteRefCarrierRanks", "Dictionary"))
        )
    )
</div>

@(Html.Kendo().ColorPicker()
    .Name("RankColor")
    .Value("#=RankColor#")
    .Opacity(true)
)

[Dimiter Madjarov]

Hello Mark,


I tried to reproduce the issue in the attached project, but to no avail. Could you please let me know if I am doing anything different than in your scenario?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

[Jark Monster]

I was able to compare your code with mine in notepad++, but I am unable to run your solution, as I do not have that version of Visual Studio.

I am still experiencing the issue with my code however, but only in IE 11.0.9600.16428.  Though it shouldn't matter, my OS is Windows 7.

Could I trouble you for a VS 2010 compatible version of your project so I could attempt to execute on my side?

Thanks!

[Dimiter Madjarov]

Hello Mark,


I am attaching the project for VS 2010. If the problem is still persisting, please reproduce it in the sample project or in a separate one, so I could inspect it locally.

Regards,
Dimiter Madjarov
Telerik

[Jark Monster]

Thank you for posting an updated project.  I was able to run it and run down the issue.

The problem was not with Kendo but with some custom css in the Site.css file that was wrong but not problematic until IE 11.

There was some styling being applied to the html element that would aid in centering the application on the page.  That styling has now been moved to the body element which is where it should have been all along.  I apologize for the goose chase, but I you do have my thanks for helping me to narrow down to and eliminate the issue.