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

Question

我第一次使用Clarity datagrid的可扩展行功能。我最初的假设是，我可以在折叠视图内编写任何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>

我将对此进行进一步调查，看看是否可以更好地解决它，但这为您提供了前进的方向。