title: Datagrid - Row Details Full Width
body: <p>How do I get the row details of the datagrid component to take up the full width of the available space in the grid?</p>
  
  <p>I've tried modifying flex and width properties of different css classes, but nothing I've tried seems to be working.</p>
  
  <p><a href="https://plnkr.co/edit/Y7L3eGpYbzvd31HK0v2F?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/Y7L3eGpYbzvd31HK0v2F?p=preview</a></p>
  
  <pre><code>&lt;clr-datagrid&gt;
    &lt;clr-dg-column clrDgField="firstname"&gt;First name&lt;/clr-dg-column&gt;
    &lt;clr-dg-column clrDgField="lastname"&gt;Last name&lt;/clr-dg-column&gt;
  
    &lt;clr-dg-row *clrDgItems="let user of users"&gt;
        &lt;clr-dg-cell&gt;{{user.firstname}}&lt;/clr-dg-cell&gt;
        &lt;clr-dg-cell&gt;{{user.lastname}}&lt;/clr-dg-cell&gt;
  
        &lt;my-detail *clrIfExpanded ngProjectAs="clr-dg-row-detail"&gt;&lt;/my-detail&gt;
    &lt;/clr-dg-row&gt;
  
    &lt;clr-dg-footer&gt;{{users.length}} items&lt;/clr-dg-footer&gt;
  &lt;/clr-datagrid&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>@Component({
  selector: "my-detail",
  template: `
      &lt;clr-dg-row-detail [clrDgReplace]="true"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-xs-2"&gt;Lorem Ipsum:&lt;/div&gt;
            &lt;div class="col-xs-4"&gt;...&lt;/div&gt;
            &lt;div class="col-xs-2"&gt;Lorem Ipsum:&lt;/div&gt;
            &lt;div class="col-xs-4"&gt;...&lt;/div&gt;
          &lt;/div&gt;
      &lt;/clr-dg-row-detail&gt;
  })
  </code></pre>