Slickgrid cell borders are clipped after setting box-sizing to use content-box

Question

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

 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);
 })

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.

Background:

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):

resizing a slickgrid column header causes it to be misaligned with body

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.

Answer 1

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.

Answer 2

In my case I am using Slickgrid with slick.autocolumnsize plugin. If you would like to avoid misalign in Firefox only replace the measureCellPaddingAndBorder() function in slick.grid.js to this.

I've found the answer here: https://github.com/mleibman/SlickGrid/pull/699, but I've modified the if statements because of compatibility with Google Chrome and Firefox at the same time. You don't have to modify the css of SlickGrid.

 function measureCellPaddingAndBorder() {
        var el;
        var h = ["borderLeftWidth", "borderRightWidth", "paddingLeft", "paddingRight"];
        var v = ["borderTopWidth", "borderBottomWidth", "paddingTop", "paddingBottom"];

        el = $("<div class='ui-state-default slick-header-column' style='visibility:hidden'>-</div>").appendTo($headers);
        headerColumnWidthDiff = headerColumnHeightDiff = 0;
        if (el.css("box-sizing") != "content-box" && el.css("-moz-box-sizing") != "content-box" && el.css("-webkit-box-sizing") != "border-box") {
            $.each(h, function(n, val) {
                headerColumnWidthDiff += parseFloat(el.css(val)) || 0;
            });
            $.each(v, function(n, val) {
                headerColumnHeightDiff += parseFloat(el.css(val)) || 0;
            });
        }
        el.remove();

        var r = $("<div class='slick-row' />").appendTo($canvas);
        el = $("<div class='slick-cell' id='' style='visibility:hidden'>-</div>").appendTo(r);
        cellWidthDiff = cellHeightDiff = 0;
        if (el.css("box-sizing") != "content-box" && el.css("-moz-box-sizing") != "content-box" && el.css("-webkit-box-sizing") != "border-box") {
            $.each(h, function(n, val) {
                cellWidthDiff += parseFloat(el.css(val)) || 0;
            });
            $.each(v, function(n, val) {
                cellHeightDiff += parseFloat(el.css(val)) || 0;
            });
        }
        r.remove();

        absoluteColumnMinWidth = Math.max(headerColumnWidthDiff, cellWidthDiff);
    }