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

Question

我第一次使用 Clarity 数据网格的可扩展行功能。我最初的假设是，我可以在折叠 View 中编写任何 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 这会导致您的 block 元素 flex 以适合容器。简单的解决方法是像这样将其包装在单个 block 元素中。

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

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