换行符不适用于清晰度可扩展行数据网格

Question

我第一次使用 Clarity 数据网格的可扩展行功能。我最初的假设是，我可以在折叠视图中写入任何 HTML 以显示。

但不知何故，这不起作用。即使我明确提到 <br> 标签，也不会发生换行。

<clr-dg-row-detail *clrIfExpanded>
    <h2> 1st Line </h2>
    <br>
    <h3> Why the next line is not coming in new Line </h3>
</clr-dg-row-detail>

我不确定我是否遗漏了一些基本概念，但这很烦人，而且我不知道如何解决这个问题。这是我的 stackblitz link：https://stackblitz.com/edit/clarity-datagrid-basic-fvjrst?file=app/app.component.html

Answer 1

扩展内容的容器使用 display: flex，这会导致您的块项目弯曲以适合容器。简单的解决方法是像这样将其包装在单个块元素中。

<clr-dg-row-detail *clrIfExpanded>
  <div>
    <h2> Header 2 </h2>
    <br>
    <h3> Header 3 </h3>
  </div>
</clr-dg-row-detail>

我会进一步调查这个问题，看看我们是否可以更好地解决它，但这为您提供了前进的道路。

Line breaks not working on clarity expandable rows data grid