SlickGrid 그리드 크기 조정 : 표

Question

나는 정적 크기의 상자가 있습니다. 상자 안에는 슬릭 그리드 인스턴스와 맨 아래에 나타나는 임시 콘텐츠가 있습니다. 그리드의 세로 크기를 적절하게 변경하여 부모 상자의 크기를 조정하지 않고 모든 임시 콘텐츠가 아래쪽에 표시되도록하고 싶습니다.

div에서 display: table; 및 display: table-row;을 사용하여이 작업을 수행했습니다.

Fiddle Here : 그리드를 추가하기 전에 내용을 전환하여 원하는 것을 확인하십시오. "그리드 추가"를 클릭하여 그리드를 초기화하고 문제를 일으 킵니다.

SlickGrid는 컨테이너가 display: table; 일 때 올바르게 크기가 조정되지 않는 것처럼 보입니다. 그것은 가로로 너무 크게되고 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; 
} 

자바 스크립트

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