0

Kendo UI ウィンドウを使用して、ブートストラップ カラー ピッカーもある編集フォームを表示する際に問題が発生しています。問題は、ウィンドウが常にカラー ピッカーの上に表示され、その半分を覆うことです。ウィンドウがモーダル ウィンドウとして設定されている場合、カラー ピッカーに触れることはできませんが、モーダル設定が 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>

Kendo UI ウィンドウの背後に表示される Bootstrap カラー ピッカー

4

1 に答える 1

1

これは思ったよりも簡単な修正で、見つけるのに時間がかかりました。これに関する問題は、要素の z インデックスを決定することでした。Kendo UI ウィンドウの z-index は 10007 で、カラー ピッカーで z-index を設定しようとしていた値よりもはるかに高かったです。私が思いついた解決策は、ブートストラップの 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 に答える