AG Grid 불균일 한 열 너비

Question

api.sizeColumnsToFit()를 사용할 때 내 눈금이 고르게 열 너비를 표시하는 데 어려움을 겪고 있습니다. 내가 부모 DIV/브라우저 창 크기가 변경 될 때 열의 크기 변경 내 그리드를 구성

:

this.gridOptions = <GridOptions>{ 
     onModelUpdated:() => { 
      this.gridOptions.api.sizeColumnsToFit(); 
     }, 
     onGridSizeChanged:() => { 
      this.gridOptions.api.sizeColumnsToFit(); 
     } 
    }; 

이 작동하지만, 결과 열 너비가 고르지하지보다 더 자주 있습니다. 아래 13 번째 달의 첫 번째와 두 번째 날을 확인하십시오 :

이보다 신뢰할 수있는 제안은 매우 환영합니다.

Answer 1

가능한 해결책은 plnkr입니다. 여기에 본질적으로 당신이 할 수있는 것입니다 그러나

var windowWidth = document.querySelector('#myGrid').offsetWidth - 170 - 17, 
// calculate the window width minus any columns you don't want to size for 
    and a little magic number for the vertical scrollbar (17 was for chrome on mac) 

    sizableColumns = gridOptions.columnApi.getColumnState().map(e=>e.colId).filter(e=>e!='athlete'), 
// get the colId of only the columns that you want to resize 

    sizableColumnWidth = Math.floor(windowWidth/sizableColumns.length); 
// calculate the width of each column by dividing the available width by the number of columns 

    sizableColumns.forEach(e=>gridOptions.columnApi.setColumnWidth(e,sizableColumnWidth)) 
// iterate through the columns you want to resize and set their new column width 

---

, 난 당신이 많은 사용자가 브라우저 창 크기를 조정 될 것 ...뿐만 아니라하지만, 크기를 조정하는 방법을 고려하여 더 나을 수 있다는 생각 그들의 창 천천히 여러 번. 이 게시물을 확인하십시오

http://davidgoss.co/2014/04/15/users-do-resize-their-browser-windows-take-2/

https://medium.com/@stephenkeable/do-users-resize-their-browser-windows-or-is-it-just-developers-and-designers-e1635cbae1e1

이 게시물 모두

데스크톱 사용자의 약 2 %가 브라우저의 크기를 조정하는 것을 나타냅니다. 그리고 훨씬 더 작은 부분은 브라우저를 천천히 여러 번 크기를 조정합니다. 아마도 이러한 <에 1 %라고 말하면 브라우저의 크기를 조정하지 않거나 열의 크기를 수동으로 조정할 수 있으므로이 이상한 동작을 알게되면 열 자체의 크기를 조정할 수 있습니다.

---

기술 정보 :

열이 맞는 크기로 알고리즘은 매우 정교하기 때문에 귀하의보고 행동이 일어나고

. 모든 열의 상대적 크기를 고려하여 적절하게 넓히므로 100, 200, 100 크기의 열이 4 개인 경우 창 크기를 조정하면 가운데 열이 다른 열의 크기의 두 배로 계속 표시됩니다.

알고리즘은 픽셀의 나머지 부분을 첫 번째 열에 배치하므로 9 개의 열과 100px가있는 경우 8 열의 크기는 11 픽셀이고 하나의 크기는 12로 지정됩니다. 열은 실제로 "적합"하고 열로 채워지지 않는 몇 픽셀을 남기지 않습니다 (제안 된 옵션과 같습니다)