0

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

更多详情：

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

    <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>

Bootstrap 颜色选择器显示在 Kendo UI 窗口后面

4

1 回答 1

1

这比我想象的更容易解决，只是花了一段时间才找到。与此相关的问题是确定元素的 z 索引。Kendo UI 窗口的 z-index 为 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 */
}
于 2013-02-12T18:26:20.567 回答