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

Question

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

VMware 可扩展数据网格：https://vmware.github.io/clarity/documentation/v0.11/datagrid/expandable-rows

但不知何故，这是行不通的。即使我明确提到<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 链接：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>

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