Question

我有一个静态大小的盒子。在框中，我有一个slickgrid实例和一些显示在底部的临时内容。我希望网格的垂直大小能够很好地流动，以便所有临时内容都显示在底部，而不会调整父框的大小。

我在div上使用display: table;和display: table-row;完成了此操作。

Fiddle Here：在添加网格之前切换内容以查看我希望它执行的操作。点击＆＃34;添加网格＆＃34;初始化网格并导致问题。

当容器使用display: table;时，SlickGrid似乎无法正确调整大小。它在水平方向上变得过大，在调用grid.resizeCanvas()时似乎会变大。

如果您从#table和#tallRow移除表格显示，则网格尺寸正确。但是，切换内容不会垂直缩小网格。我可以在调用grid.resizeCanvas()之前在JS中手动调整容器大小，但是表/表行解决方案非常优雅，我想保留它。

有什么想法吗？

HTML

<button id="add" onclick="addGrid()">Add Grid</button><button onclick="toggle()">Toggle Content</button>
<div id="box">
    <div id="table">
        <div id="tallRow">
            <div id="grid"></div>
        </div>
        <div id="tempRow">
            <div id="test">Some content</div>
        </div>
    </div>
</div>

CSS

html {
    background: #444;
    color: #fff;
}

#box {
    background: #666;
    width: 350px;
    height: 500px;
    padding: 5px;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
}

#tallRow {
    height: 100%;
    display: table-row;
}

#grid {
    width: 100%;
    height: 100%;
    background: #777;
    border: 1px solid black;
    box-sizing: border-box;
}

#tempRow {
    display: none;
}

的Javascript

function toggle() {
    var el = document.getElementById('tempRow');
    el.style.display = el.style.display == 'table-row' ? 'none' : 'table-row';
    grid.resizeCanvas();
}

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

var options = {
    fullWidthRows: true,
    forceFitColumns: true,
    enableColumnReorder: false
};

function addGrid() {
    var data = [];
    for (var i = 0; i < 500; i++) {
        data[i] = {
            title: "Task " + i
        };
    }

    grid = new Slick.Grid("#grid", data, columns, options);
    document.getElementById('add').style.display = 'none';
}

Answer 1

您必须使用：table-layout:fixed;到<table>或display:table;元素，以便在指定宽度时不再缩小/展开。的 DEMO

#table { width: 100%; height: 100%; display: table; table-layout:fixed; }

SlickGrid网格大小与display：table

1 个答案: