问题
Only the first column header is being drawn correctly, all subsequent items in the columnDef array are drawn below it. If I populate the table with data, all column data is stacked to the left as well.
Here's what it looks like; the gray band in the row, below Country is actually moving down, as part of the framework.setTimeout() function in ag-grid.js.
The JS looks like:
gridOptions.columnDefs = [
{ headerName: 'Country', field: 'country' },
{ headerName: 'City', field: 'city' },
{ headerName: 'Jan', field: 'jan_act' },
{ headerName: 'Feb', field: 'feb_act' },
{ headerName: 'Mar', field: 'mar_act' },
{ headerName: 'Apr', field: 'apr_act' },
{ headerName: 'May', field: 'may_act' }];
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
I'm using ag-grid.noStyle.js v7.0.2 and think I have all dependencies loaded correctly for ag-grid. Am not using React or Angular.
回答1:
Ah, found it! It's the <!DOCTYPE html> tag.
Problem was immediately resolved by changing the height of my div to pixel based, not %, e.g.
<div id="myGrid" style="height: 400px;" class="ag-fresh"></div>
Found it by going back to absolute basics after the JavaScript Datagrid example also failed to work.
- Working with the CSS height property and percentage values.
来源：https://stackoverflow.com/questions/41008182/ag-grid-column-headers-stacked-to-the-left