title: Vuetify - Layout problem for v-data-table
body: <p>I have a Vuetify v-data-table on a v-card and I cannot get the layout right.</p>
  
  <p>So it's a configurable 2x2 layout (and it's supposed to use pagination, no scrolling).</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-layout column&gt;
      &lt;v-layout row&gt;
        &lt;DashboardItem :item="itemTypes[0]" class="xs6" /&gt;
        &lt;DashboardItem :item="itemTypes[1]" class="xs6" /&gt;
      &lt;/v-layout&gt;
      &lt;v-layout row&gt;
        &lt;DashboardItem :item="itemTypes[2]" class="xs6" /&gt;
        &lt;DashboardItem :item="itemTypes[3]" class="xs6" /&gt;
      &lt;/v-layout&gt;
    &lt;/v-layout&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The user can configure items into a 2x2 layout. This is a 2x2 layout, so it's expected to be 4 items in total, with all 4 items of the same size.</p>
  
  <p>This is what a DashboardItem looks like:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-flex&gt;
      &lt;v-card height="100%"&gt;
        &lt;Statistics v-if="item==='Statistics'" /&gt;
        &lt;Alarms v-if="item==='Alerts'" /&gt;
        &lt;Devices v-if="item==='Devices'" /&gt;
        &lt;Heartbeat v-if="item==='Heartbeat'" /&gt;
      &lt;/v-card&gt;
    &lt;/v-flex&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>So, depending on the item type we show a component for that type.
  Now it gets interesting (at least for me). Here is the Alarms component. It's a title + a table that shows the data.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;v-layout column child-flex&gt;
      &lt;v-card-title&gt;{{ $t('biz.general.items.alarms') }}&lt;/v-card-title&gt;
      &lt;v-layout ref="tableDiv" style="height:90%;" column v-resize="onResize"&gt;
        &lt;v-data-table :headers='headers' :items='alarms' :pagination.sync='pagination' hide-actions&gt;
          &lt;template slot="items" slot-scope="props"&gt;
            &lt;td&gt;{{ props.item.fridgeDisplayName }}&lt;/td&gt;
            &lt;td&gt;{{ props.item.alarmTime | formatDateTime }}&lt;/td&gt;
            &lt;td&gt;{{ props.item.state }}&lt;/td&gt;
            &lt;td&gt;{{ props.item.task }}&lt;/td&gt;
          &lt;/template&gt;
        &lt;/v-data-table&gt;
      &lt;/v-layout&gt;
      &lt;div class="text-xs-center pt-2"&gt;
        &lt;v-pagination circle v-model="pagination.page" :length="pages"&gt;&lt;/v-pagination&gt;
      &lt;/div&gt;
    &lt;/v-layout&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This kind of works. But there are problems:</p>
  
  <ul>
  <li>The height of the Alarms component is too large. It is supposed to be a 2x2 layout with all cards of the same size. But the Alarms component pushes the envelope. It's rendered much higher than 50% of the overall height and the row that contains the Alarms component is much higher than the other row. It's no longer a 2x2 layout with all items of the same height.</li>
  <li>Based on the size of the component, I need to change and recalculate the paging of the v-data-table. So when the user resizes the window, I change the pagination of the table. But I cannot, due to the size issue above, the table's v-card is just not sized properly.</li>
  </ul>
  
  <p>How do I <strong>force</strong> a 2x2 layout, without the v-data-table pushing the height of its v-card?</p>
  
  <p>Here is a CodePen with the expected layout:
  <a href="https://codepen.io/saschaausulm/pen/xQwawJ" rel="nofollow noreferrer">https://codepen.io/saschaausulm/pen/xQwawJ</a></p>
  
  <p>This shows the problem:
  <a href="https://codepen.io/saschaausulm/pen/KrdBZd" rel="nofollow noreferrer">https://codepen.io/saschaausulm/pen/KrdBZd</a></p>
  
  <p><strong>Update</strong>
  You can resize the table. </p>
  
  <p>Small:
  <a href="https://i.stack.imgur.com/vQ6Q9.png" rel="nofollow noreferrer">Small</a></p>
  
  <p>Large:
  <a href="https://i.stack.imgur.com/EuvSA.png" rel="nofollow noreferrer">After resize</a></p>
  
  <p>The base issue is that the v-card doesn't keep its height.</p>
  
  <p>Thanks,</p>
  
  <p>Sascha</p>
  
  <p><strong>Answer</strong></p>
  
  <p>The answer is a bit weirder than expected but Steven Spungin's answer helped a bit.</p>
  
  <p>It's the v-data-table that pushes. So setting the height of the table helps.
  And the weird part:
  I am setting </p>
  
  <p>style="height:5px;" </p>
  
  <p>on the v-data-table.</p>
  
  <p>Then, the v-data-table stays in the v-card. And resizes/paginates through the v-resize as expected when the user changes the size of the window.</p>