Search code examples
cssangularvmware-clarity

Line breaks not working on clarity expandable rows data grid

First time I am using the expandable rows feature of Clarity datagrid. My initial assumption was, I can write any HTML inside the collapsed view to display.

VMware expandable datagrid: https://vmware.github.io/clarity/documentation/v0.11/datagrid/expandable-rows

But somehow, this is not working. Even if I explicitly mention <br> tag, then also line break is not happening.

<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>

I am not sure if I am missing some basic concept, but this is annoying, and not able to figure out how I can fix this. Here is my stackblitz link: https://stackblitz.com/edit/clarity-datagrid-basic-fvjrst?file=app/app.component.html

Solution

  • The container for the expanded content uses display: flex which is causing your block items to flex to fit the container. The simple workaround is to wrap it in a single block element like this.

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

    I'll investigate this further and see if we can fix it better, but this gives you a way forward.