0

kendoSplitterを使用して、2つのペインを持つページレイアウトを作成しています。最初のペインのサイズを「100px」に設定し、残りのスペースを2番目のペインに設定します。

ペインのパディングを「5px」に設定し、ボックスサイズを「border-box」に設定します。
したがって、パディングを含むペイン1の幅は「100px」と予想されますが
、ページの読み込み時に、100pxの上にパディングを適用し、幅を110pxにして、スクロールバーを表示します。

$('#splitter').kendoSplitter({
    panes:[
    {collapsible:true,size:'100px'},
    {collapsible:true,resizable:true}
    ]
});

この場合のjsFiddler：http:
//jsfiddle.net/nagakiran/xmTJF/

しかし、kendoSplitterを初期化した後にパディングを適用すると、このフィドラーのように機能します。 http://jsfiddle.net/nagakiran/hPVWf/1/

kendoUIのバグに見えますか、それとも何かが足りませんか？

4

3 に答える 3

1

バグではないと思います。文書化されていない機能または副作用かもしれません。物事がどのように実行されるかについての質問のようです。HTML は KendoUI ウィジェットによって「装飾」されていることを忘れないでください。定義したものsplitter1は、あなただけのものではなくdiv、より多くのもの (装飾) です。

呼び出し後にスタイルを設定するとkendoSplitter、実際には KendoUI の装飾の結果を再装飾しています。kendoSplitterペインの を固定幅に設定するためwidth、パディングによって余分なスペースが追加されることはありません。

しかし、CSS を使用すると同時に実行kendoSplitterされ、サイズを要求すると間違ったサイズになります。

KendoUI はもっとスマートにすべき？おそらくですが、実際には、CSS が何を実行し、CSS の前にカウンター アクションを適用するかを推測するのはかなり困難です。

于 2012-11-28T15:34:02.703 に答える
0

kendoSplitter にフラグを追加して、分割ペインに幅を割り当てる方法を変更することで修正しました。このフラグが設定されている場合、各ペインに指定された「左パディング + パディング右」によって、各ペインに割り当てられた幅が縮小されます。

その後、各スプリッターペイン内にラッパー div を作成し、「box-sizing:border-box」と「padding:10px」を設定する簡単な解決策を見つけました。これは問題なく機能しました。

于 2013-02-08T09:42:26.683 に答える
0

剣道は に問題がありbox-sizing: borderboxます。この投稿が役立つ場合があります。

于 2013-04-17T14:53:20.907 に答える