Datagrid - Zeile Details Volle Breite

Question

Wie bekomme ich die Zeilendetails der Datagrid-Komponente, um die volle Breite des verfügbaren Speicherplatzes im Raster zu übernehmen?

Ich habe versucht, flex und Breite Eigenschaften der verschiedenen CSS-Klassen zu ändern, aber nichts, was ich versucht habe, scheint zu arbeiten.

https://plnkr.co/edit/Y7L3eGpYbzvd31HK0v2F?p=preview

<clr-datagrid> 
    <clr-dg-column clrDgField="firstname">First name</clr-dg-column> 
    <clr-dg-column clrDgField="lastname">Last name</clr-dg-column> 

    <clr-dg-row *clrDgItems="let user of users"> 
     <clr-dg-cell>{{user.firstname}}</clr-dg-cell> 
     <clr-dg-cell>{{user.lastname}}</clr-dg-cell> 

     <my-detail *clrIfExpanded ngProjectAs="clr-dg-row-detail"></my-detail> 
    </clr-dg-row> 

    <clr-dg-footer>{{users.length}} items</clr-dg-footer> 
</clr-datagrid> 

---

@Component({ 
selector: "my-detail", 
template: ` 
    <clr-dg-row-detail [clrDgReplace]="true"> 
     <div class="row"> 
      <div class="col-xs-2">Lorem Ipsum:</div> 
      <div class="col-xs-4">...</div> 
      <div class="col-xs-2">Lorem Ipsum:</div> 
      <div class="col-xs-4">...</div> 
     </div> 
    </clr-dg-row-detail> 
}) 

Answer 1

Es ist schwer zu sagen, ob dies die Antwort auf Ihre Frage. Sie sollten das Datagrid-CSS nicht ändern müssen, damit der Inhalt eine vollständige Zeile einnimmt. Erweiterbare Zeilen können mit Inhalten verwendet werden, die die gesamte Zeile belegen, oder mit Inhalten, die pro Spalte Platz belegen.

Hier ist ein Plunk mit erweiterbaren Zeilen implementiert, so dass Sie vollen Zeileninhalt mit Inhalt pro Spalte tauschen können.

https://plnkr.co/edit/9cj1lE5B4dwpRSRcKXXX?p=preview

Die entsprechende HTML wie folgt aussieht:

<clr-datagrid> 
     <clr-dg-column>User ID</clr-dg-column> 
     <clr-dg-column>Name</clr-dg-column> 
     <clr-dg-column>Creation date</clr-dg-column> 

     <clr-dg-row *clrDgItems="let user of users" [clrDgItem]="user"> 
       <clr-dg-cell>{{user.id}}</clr-dg-cell> 
       <clr-dg-cell>{{user.name}}</clr-dg-cell> 
       <clr-dg-cell>{{user.creation | date}}</clr-dg-cell> 

       <!-- Example using a wrapper component --> 
       <clr-dg-row-detail *clrIfExpanded> 
       <ng-template [ngIf]="detail === 'default'"> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in neque in ante placerat mattis id sed 
        quam. Proin rhoncus lacus et tempor dignissim. Vivamus sem quam, pellentesque aliquet suscipit eget, 
        pellentesque sed arcu. Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra. Aenean 
        sagittis nibh lacus, in eleifend urna ultrices et. Mauris porttitor nisi nec velit pharetra porttitor. 
        Vestibulum vulputate sollicitudin dolor ut tincidunt. Phasellus vitae blandit felis. Nullam posuere 
        ipsum tincidunt velit pellentesque rhoncus. Morbi faucibus ut ipsum at malesuada. Nam vestibulum felis 
        sit amet metus finibus hendrerit. Fusce faucibus odio eget ex vulputate rhoncus. Fusce nec aliquam leo, 
        at suscipit diam. 
       </ng-template> 

       <ng-template [ngIf]="detail === 'cols'"> 
        <clr-dg-cell>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</clr-dg-cell> 
        <clr-dg-cell>Proin in neque in ante placerat mattis id sed quam.</clr-dg-cell> 
        <clr-dg-cell>Proin rhoncus lacus et tempor dignissim.</clr-dg-cell> 
        <clr-dg-cell>Vivamus sem quam, pellentesque aliquet suscipit eget, pellentesque sed arcu.</clr-dg-cell> 
        <clr-dg-cell>Vivamus in dui lectus. Suspendisse cursus est ac nisl imperdiet viverra.</clr-dg-cell> 
       </ng-template> 
       </clr-dg-row-detail> 
      </clr-dg-row> 

     <clr-dg-footer>{{users.length}} users</clr-dg-footer> 
    </clr-datagrid>