Dynamics CRM自定义拖拽子网格如何实现div内图标与文本居中显示

你只需要修改图标类、补充CSS样式，完全复用Dynamics CRM自带的符号字体和设计规范，就可以实现和默认网格完全一致的展示效果，无需额外引入资源： #

1. 替换图标类并调整DOM属性 #

你当前使用的InsertKbArticle-symbol是知识库插入图标，Dynamics CRM默认空网格使用的图标类为EmptyGrid-symbol，直接替换即可，同时给文本节点添加CRM自带的文本样式类empty-grid-text，复用原生样式。
修改后的JS代码如下：

//Drop-zone placeholder text
if (this.directionCode) {
    debugger;
    this._divNoRecordsContainerGrid = document.createElement("div");
    this._divNoRecordsContainerGrid.className = "cc-grid-noRecords-Container";
    this._divNoRecordsContainerGrid.id = "gridNoRecords";

    this._divNoRecordsContainer = document.createElement("div");
    // 新增对齐类，复用CRM原生flex布局规则
    this._divNoRecordsContainer.className = "flexbox flex-align-center flex-direction-col justify-center";
    this._divNoRecordsContainer.setAttribute("role", "presentation");
    this._divNoRecordsContainer.title = "No data available";

    this._spanNoRecordsIcon = document.createElement("span");
    // 替换为默认空网格图标类
    this._spanNoRecordsIcon.className = "symbolFont EmptyGrid-symbol";
    this._spanNoRecordsIcon.setAttribute("aria-hidden", "true");

    this._spanNoRecordsText = document.createElement("span");
    // 新增原生空状态文本类
    this._spanNoRecordsText.className = "empty-grid-text";
    this._spanNoRecordsText.innerHTML = "Drag and drop your attachments here";

    this._divNoRecordsContainer.appendChild(this._spanNoRecordsIcon);
    this._divNoRecordsContainer.appendChild(this._spanNoRecordsText);
    this._divNoRecordsContainerGrid.appendChild(this._divNoRecordsContainer);

    this._attachmentContainer.appendChild(this._divNoRecordsContainerGrid);
}

2. 补充CSS样式匹配原生间距 #

修改你的CSS类，添加间距和对齐规则，和原生网格保持一致：

.cc-grid-noRecords-Container {
    display: block;
    padding: 2rem 0;
    width: 100%;
}
.cc-grid-noRecords-Container .EmptyGrid-symbol {
    font-size: 3rem;
    color: #666666;
    margin-bottom: 0.8rem;
}
.cc-grid-noRecords-Container .empty-grid-text {
    font-size: 0.875rem;
    color: #666666;
    font-weight: 400;
}

效果验证 #

修改完成后，你的自定义拖拽网格的图标样式、大小、文本字体、行高、间距都会和Dynamics CRM默认子网格完全一致，且兼容CRM所有主流版本，不会因为系统升级出现样式错乱问题。

内容的提问来源于stack exchange，提问作者Furkan Karacan