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

Question

I'm learning ag-grid to display data into a grid. 我正在学习ag-grid以将数据显示到网格中。 I've just started with a simple example to display simple data to cell using cellRenderer . 我刚开始用一个简单的例子来使用cellRenderer向单元格显示简单数据。 You can exam on the code here : 你可以在这里检查代码：
index.html : 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 : 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);
        });
});

Please note the css I used: 请注意我使用的CSS：

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

I want to display the data in the middle of the cell (css: top: 50%; ) so I tried with above css. 我想在单元格的中间显示数据（css： top: 50%; ）所以我尝试使用上面的css。 But after edited, the cell didn't show as expected. 但经过编辑，细胞没有按预期显示。 Please help! 请帮忙！ Render at start: 开始渲染：

Render at editting: 渲染编辑：

Render after editted: 编辑后渲染：

Answer 1

You need to update your CSS. 你需要更新你的CSS。 Give height and line-height properties for span.cell1 the same number which you provide to your rowHeight . 为span.cell1指定height和line-height属性与您为rowHeight提供的数字相同。

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

Have a look at the updated plunk: https://next.plnkr.co/edit/4HHSANMjCpRkTdmm 看看更新的插件： https ：//next.plnkr.co/edit/4HHSANMjCpRkTdmm

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-04-21 04:21:16

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-04-21 04:21:16

解决方案1
0 已采纳 2019-04-21 04:21:16