Datagrid - Row Details Full Width

Question

How do I get the row details of the datagrid component to take up the full width of the available space in the grid?

I've tried modifying flex and width properties of different css classes, but nothing I've tried seems to be working.

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

Its hard to say if this is the answer to your question. You shouldn't need to change the datagrid css to get content to take up a full row. Expandable rows can be used with content that takes up the whole row or with content that takes up space on a per column basis.

Here is a plunk with expandable rows implemented so you can swap full row content with per column content.

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

The relevant html looks like this:

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