javascript - kendoSplitter 中的窗格不尊重“box-sizing:border-box”属性

Question

我正在使用 kendoSplitter 创建带有 2 个窗格的页面布局。将第一个窗格大小设置为“100px”，将剩余空间设置为第二个窗格。

将窗格的填充设置为“5px”，并将框大小设置为“边框框”。
所以，预计pane1的宽度（包括填充）是“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 中的错误，还是我遗漏了什么？

score 1 · Accepted Answer

我不认为这是一个错误。也许是未记录的功能或副作用。这似乎是一个关于如何执行事物的顺序的问题。请记住，您的 HTML 是由 KendoUI 小部件“装饰”的，因此您定义splitter1的不仅仅是您的div东西，而是更多的东西（装饰）。

当您在调用后对其进行样式设置时，kendoSplitter您实际上是在重新装饰 KendoUI 装饰的结果。由于kendoSplitter将width窗格的设置为固定宽度，因此填充不会增加额外空间。

但是当你使用 CSS 时，它会同时运行kendoSplitter，当它要求大小时，它会得到错误的大小。

KendoUI 应该更智能吗？也许吧，但实际上很难猜测 CSS 将要做什么并在 CSS 之前应用一个反动作。

score 0 · Accepted Answer

通过在 kendoSplitter 中添加一个标志来修复它，该标志修改了将宽度分配给拆分器窗格的方式。如果设置了此标志，它将通过为该窗格指定的“padding-left+padding-right”减少分配给每个窗格的宽度。

之后找到了一个简单的解决方案，即在每个拆分器窗格中创建包装 div 并设置“box-sizing:border-box”和“padding:10px”，这没有问题。

score 0 · Accepted Answer

0

剑道有问题box-sizing: borderbox。这篇文章可能会有所帮助。

于 2013-04-17T14:53:20.907 回答

3 回答 3