个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 00:04:49 31 4
gpt4 key购买 nike

我正在学习 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。但编辑后，单元格没有按预期显示。请帮忙!开始渲染:
enter image description here
在编辑时呈现:
enter image description here
编辑后渲染:
enter image description here

最佳答案

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

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

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

关于html - Ag-grid 单元格在编辑后显示错误的 css 格式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55771915/

31 4 0
文章推荐： c++ - va_list 无法获取任何类型
文章推荐： Javascript 代码适用于 Safari，但不适用于 Firefox。为什么？
文章推荐： html - Magento 2 - 更改核心代码 css/html 未反射(reflect)在前端
文章推荐： css - 如何过渡高度 : 0; to height: auto; using CSS?
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com