web-dev-qa-db-ja.com

Kendo UI Bootstrapテーマがうまく機能しないBootstrap 3.1.0

Bootstrap 2.3から3.1に基づいてサイトを変換しているところですが、剣道のBootstrapテーマで多くの問題が発生しています。

私はカスタムグリッドポップアップエディター内でuse Bootstrap form-groupsを使用する傾向がありますが、KendoのCSSでは動作しません。

問題を表示するために Fiddle を設定しました。レコードを編集するとわかるように、ラベルのサイズと位置、入力と終了。

これは、common-template.lessファイルの最後の2つのエントリと関係があります。

.k-animation-container,
.k-widget,
.k-widget *,
.k-animation-container *,
.k-widget *:before,
.k-animation-container *:after
{
    .box-sizing(content-box);
}

.k-button,
.k-textbox,
.k-autocomplete,
div.k-window-content,
.k-tabstrip > .k-content > .km-scroll-container,
.k-block,
.k-edit-cell .k-widget,
.k-grid-edit-row .k-widget,
.k-grid-edit-row .text-box,
.km-actionsheet > li,
.km-shim
{
    .box-sizing(border-box);
}

これらを削除すると、Bootstrapフォームは正しく見えますが、特定のKendo要素（ページャーなど）が悪影響を受けます。

これを回避する方法はありますか、それともTelerikがそのフレームワークを使用することを意図している方法ではありませんか？

twitter-bootstrapkendo-uikendo-grid
14
Mat

以下のCSSスタイルを使用して、Bootstrap要素をKendo要素内で正しく表示するようにしました。特に、.row（および列クラス）をKendoWindows内で機能させるのに問題がありました。しかし、このCSSは私たちの問題を修正しました。

.k-widget select, .k-widget textarea, .k-widget input[type="text"]:not(.k-input), .k-widget input[type="password"], .k-widget input[type="datetime"], .k-widget input[type="datetime-local"], .k-widget input[type="date"], .k-widget input[type="month"], .k-widget input[type="time"], .k-widget input[type="week"], .k-widget input[type="number"], .k-widget input[type="email"], .k-widget input[type="url"], .k-widget input[type="search"], .k-widget input[type="tel"], .k-widget input[type="color"], .k-widget .uneditable-input {
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}

.k-window .row, .k-window .row *:not(.k-widget):not(.k-animation-container), .k-widget .row *:before:not(.k-widget) { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; }

.k-widget .col-lg-1, .k-widget .col-lg-2, .k-widget .col-lg-3, .k-widget .col-lg-4, .k-widget .col-lg-5, .k-widget .col-lg-6, .k-widget .col-lg-7, .k-widget .col-lg-8, .k-widget .col-lg-9, .k-widget .col-lg-10, .k-widget .col-lg-11, .k-widget .col-lg-12, .k-widget .col-md-1, .k-widget .col-md-2, .k-widget .col-md-3, .k-widget .col-md-4, .k-widget .col-md-5, .k-widget .col-md-6, .k-widget .col-md-7, .k-widget .col-md-8, .k-widget .col-md-9, .k-widget .col-md-10, .k-widget .col-md-11, .k-widget .col-md-12, .k-widget .col-sm-1, .k-widget .col-sm-2, .k-widget .col-sm-3, .k-widget .col-sm-4, .k-widget .col-sm-5, .k-widget .col-sm-6, .k-widget .col-sm-7, .k-widget .col-sm-8, .k-widget .col-sm-9, .k-widget .col-sm-10, .k-widget .col-sm-11, .k-widget .col-sm-12, .k-widget .col-xs-1, .k-widget .col-xs-2, .k-widget .col-xs-3, .k-widget .col-xs-4, .k-widget .col-xs-5, .k-widget .col-xs-6, .k-widget .col-xs-7, .k-widget .col-xs-8, .k-widget .col-xs-9, .k-widget .col-xs-10, .k-widget .col-xs-11, .k-widget .col-xs-12
{
    box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
10
John Washam

剣道のドキュメントから：

Kendo UIはデフォルトのコンテンツボックスボックスモデル（ボックスサイズのCSSプロパティ）を使用しますが、Bootstrapはデフォルト以外のbordex-boxモデルを使用し、それを含むページ上のすべての要素に適用しますブートストラップとは関係のないもの.......考えられる簡単な回避策は、Bootstrap CSSをオーバーライドし、ページ上のすべての要素にコンテンツボックスボックスモデルを適用し、ボーダーボックスを使用することです。選択したBootstrap要素のみにボックスモデルを追加します。これらはすべて.col -...クラス、.row、.container、および.container-fluidです）。次のCSSを追加できます。 BootstrapおよびKendoUIスタイルシートの後のルール。

サンプルのcssソリューションのリファレンスを参照してください： http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/using-kendo-with-Twitter-bootstrap#nesting-kendo-ui -widgets-and-bootstrap-grid-layout

9
sham

私はそれらのcss行を追加することによってこの問題を解決しました...：

.k-animation-container, .k-widget, .k-widget *, .k-animation-container *, .k-widget *:before, .k-animation-container *:after, .k-block .k-header, .k-list-container {
    box-sizing: inherit;
}
.k-block > .k-header, .k-window-titlebar {
    height:auto;
}
1
Dragouf

これは間違いなくBootstrapと剣道は異なるボックスモデルに依存しており、_box-sizing: border-box_に依存する要素を_box-sizing: content-box_に依存する要素と混合することの難しさに関係しています。 。

一般的に、剣道のすべてのスタイリングは、標準の_content-box_モデルに基づいています。ただし、Bootstrapのすべてのスタイリングは使いやすい_border-box_モデルに依存しています。2つの最大の違いは、パディング、境界線などの処理方法です。_content-box_これらは要素の幅の一部ですが、_border-box_ではそうではありません。

Bootstrapは、もちろん_border-box_を使用することを前提としていますが、なぜそうしないのですか？剣道ウィジェットを含む_border-box_を使用するようにページ上のすべてを設定すると便利です。その一部として、剣道はBootstrapがすべてを_border-box_を使用するように設定する可能性があることを知っているので、剣道ウィジェットとすべてのウィジェットのすべてを_content-box_に戻しますchildren 。だから、剣道に関連するものの中に何かBootstrap関連するものをネストすると、間違ったボックスモデルが表示されます。それは混乱です。

私はこれを軽減するためにさまざまなハックを試しましたが、問題の事実はそれを解決する良い方法がないということです。これは私がこれまでに最もよく機能することがわかったCSSコードです（CSS属性セレクターを使用しているので、古いブラウザーには使用できません）。

_.border-box, .border-box * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

    [class^="k-"] {
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }
}
_

次に、Bootstrapコンテンツが含まれることがわかっているKendoウィジェット内にネストされる可能性のある要素に_class='border-box'_を設定します。

1
daveaglick