设置box-sizing后使用内容框剪切Slickgrid单元格边框 [英] Slickgrid cell borders are clipped after setting box-sizing to use content-box

问题描述

我使用slickgrid 2.2和bootstrap 3.1.0。当我尝试在单元格周围设置边框时，下面的单元格在我设置box-sizing：content-box时剪切上面的边框。我似乎需要这种解决方法（基本上修复列宽问题）的原因在这个问题的结尾描述。这里是代码（使用slickgrid的示例1作为基础）：

I am using slickgrid 2.2 and bootstrap 3.1.0. When I try to set a border around a cell, the cell below clips the border of the one above when I set the box-sizing: content-box. The reason I seem to need that workaround (basically to fix a column width issue) is described at the end of this question. Here is the code (using slickgrid's example 1 as the base):

css

[class^="slickgrid_"],
[class^="slickgrid_"] div {
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
}

.slick-row {
    border-right: 2px dotted #E56278 !important;
    border-bottom: 2px dotted #E56278 !important;
}

html

<table width="100%">
    <tr>
        <td valign="top" width="50%">
            <div id="myGrid" style="width:600px;height:500px;"></div>
        </td>
        <td valign="top">
             <h2>Demonstrates:</h2>

            <ul>
                <li>basic grid with minimal configuration</li>
            </ul>
        </td>
    </tr>
</table>

javascript

javascript

 var grid;
 var columns = [{
     id: "title",
     name: "Title",
     field: "title"
 }];

 var options = {
     enableCellNavigation: true,
     enableColumnReorder: false
 };

 $(function () {
     var data = [];
     for (i=0; i<2; i++){
         data[i] = {
             title: "Task ",
             duration: "5 days",
             percentComplete: Math.round(Math.random() * 100),
             start: "01/01/2009",
             finish: "01/05/2009",
             effortDriven: 10
         };
     }

     grid = new Slick.Grid("#myGrid", data, columns, options);
 })

a href =http://jsfiddle.net/stryecho/LckHm/2/ =nofollow> http://jsfiddle.net/stryecho/LckHm/2/

http://jsfiddle.net/stryecho/LckHm/2/

正如你所看到的，第一个单元格应该有一个底部边框，但它被下面的边框剪切。

As you can see, there should be a bottom border on the first cell, but it's being clipped by the one below.

背景：

在前面的问题中，我试图找到问题的根源（我不需要显式设置框大小，因为slickgrid似乎已经解决了问题）：

In a previous question, I was trying to get to the root of the issue (I should not need to set the box-sizing explicitly since slickgrid seems to have already addressed the issue):

调整slickgrid列标题的大小导致它与主体不重合

理想情况下，我想知道如果Slickgrid已经固定，我只是使用它错了，但是，似乎我可能需要辞职自己设置box-sizing：content-box，现在带给我上面的问题。

Ideally, I'd like to know if Slickgrid is already fixed and I'm just using it wrong, However, it seems as though I may need to resign myself to setting box-sizing:content-box, which now brings me to the above question.

推荐答案

问题是由于您的单元格/行高。因为您现在使用 content-box 行高度 25px 不底部边框。行高实际上是 27px 计数底部边框（和光滑是绝对定位下一行25px下...），所以你需要强制光滑限制单元格/行高为23px + 2px底部边框。

The issue is due to your cell/row heights. Because you're now using content-box the row heights are 25px not counting the bottom borders. The row height is actually 27px counting the bottom border (and slick is absolutely positioning the next row 25px down...), so you'll need to force slick to limit the cell/row heights to 23px + 2px bottom border.

这篇关于设置box-sizing后使用内容框剪切Slickgrid单元格边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！