<clr-main-container>
<div class="content-container">
<div class="content-area">
<clr-datagrid>
<clr-dg-column>Artifact</clr-dg-column>
<clr-dg-column>Category</clr-dg-column>
<clr-dg-row>
<clr-dg-cell>AAA</clr-dg-cell>
<clr-dg-cell>111</clr-dg-cell>
<ng-container ngProjectAs="clr-dg-row-detail" *ngIf="true">
<clr-dg-row-detail *clrIfExpanded>
<clr-dg-cell>BBB</clr-dg-cell>
<clr-dg-cell>222</clr-dg-cell>
</clr-dg-row-detail>
</ng-container>
</clr-dg-row>
<clr-dg-row>
<clr-dg-cell>CCC</clr-dg-cell>
<clr-dg-cell>333</clr-dg-cell>
</clr-dg-row>
</clr-datagrid>
</div>
</div>
</clr-main-container>
This is my code when I run this on VCD it gives me following output , when expanded the row gets shifted to right side