编辑后 Ag-grid 单元格显示错误 css 格式

Question

我正在学习将数据显示到网格中的 ag-grid。我刚刚开始使用 cellRenderer 向单元格显示简单数据的简单示例。您可以在代码 here:
上进行考试 index.html:

<!DOCTYPE html>
<html lang="en">

<head>
    <script>
        var __basePath = '';
    </script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        span.cell1 {
            position: relative;
            float: left;
            top: 50%;
            left: 10%;
            transform: translate(50%, -50%);
        }
    </style>
    <script src="https://unpkg.com/ag-grid-community@20.2.0/dist/ag-grid-community.min.js">

    </script>
</head>

<body>

    <div id="myGrid" style="height: 100%;" class="ag-theme-balham"></div>
    <script src="main.js">

    </script>
</body>

</html>

main.js:

var columnDefs = [
    {
        field: 'gold',
        cellRenderer: params => {
            return '<span class="cell1">' + params.data.gold + '</span>';
        },
        editable: true,
    },
];

var gridOptions = {
    rowHeight: 60,
    columnDefs: columnDefs,
};

document.addEventListener('DOMContentLoaded', function() {
    var gridDiv = document.querySelector('#myGrid');
    new agGrid.Grid(gridDiv, gridOptions);

    agGrid
        .simpleHttpRequest({
            url:
                'https://raw.githubusercontent.com/ag-grid/ag-grid/master/packages/ag-grid-docs/src/olympicWinnersSmall.json',
        })
        .then(function(data) {
            gridOptions.api.setRowData(data);
        });
});

请注意我使用的css：

span.cell1 {
                position: relative;
                float: left;
                top: 50%;
                left: 10%;
                transform: translate(50%, -50%);
            }

我想在单元格中间显示数据 (css: top: 50%;) 所以我尝试了上面的 css。但编辑后，单元格没有按预期显示。请帮忙！开始渲染：

编辑时呈现：

编辑后渲染：

Answer 1

您需要更新 CSS。为 span.cell1 提供 height 和 line-height 属性，与您提供给 rowHeight.

的数字相同

    span.cell1 {
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

查看更新后的插件：https://next.plnkr.co/edit/4HHSANMjCpRkTdmm

编辑后 Ag-grid 单元格显示错误 css 格式

Ag-grid cell display wrong css format after edit

html

css

ag-grid