带有Bootstrap颜色选择器的Kendo UI窗口，窗口始终位于顶部

Question

我在使用Kendo UI窗口显示一个编辑表单时遇到问题，该表单上还有一个Bootstrap颜色选择器。问题是窗口始终显示在颜色选择器的顶部并覆盖其中的一半。如果窗口设置为模态窗口，则无法触摸颜色选择器，但如果模态设置设置为false，则可以更改颜色，但只能看到窗口的一半。有没有人对如何让颜色选择器显示在Kendo UI窗口之上有任何建议？我附上了一个屏幕截图来显示问题。感谢。

有关详细信息：

父页面上有一个网格，其中有一个按钮，用于打开Kendo UI窗口，然后加载局部视图。局部视图中包含编辑控件以及颜色选择器。颜色选择器设置在范围标记上：

    <span class="color" data-color="@Model.LabelColor" data-color-format="hex" id="BreedingColorPicker">
      @Html.HiddenFor(m => m.LabelColor)
      <span class="add-on"><i class="label_color_box" style="background-color: @Model.LabelColor">&nbsp;</i></span>
    </span>

Answer 1

这比我想象的更容易修复，只需要一段时间才能找到。这个问题是确定元素的z索引。 Kendo UI窗口的z索引为10007，远远高于我试图在颜色选择器上设置z-index。我想出的解决方案是进入bootstrap colorpicker.css文件并手动添加z-index。对于可能遇到类似问题的其他任何人，只需对colorpicker.css文件进行以下更改：

.colorpicker {
     *zoom: 1;
     top: 0;
     left: 0;
     padding: 4px;
     min-width: 120px;
     margin-top: 1px;
     -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
     border-radius: 4px;
     z-index: 12000; /* Added to make sure the color picker shows up on top of the Kendo UI Windows */
}