I use vuejs and v-data-table of vuetify.
My problem is that the table has only the 1/3 width of the parent div and it needs a scrollbar.
How can I set the table to have the 100% of the width of the parent div?
This is the code of App.vue the table is inside the <v-app id="inspire" >
<template>
<div >
<div class="leftDiv">
<div class="custom-select" style="width:200px;">
<select v-model="mcompetitor" >
<option v-for="comp in competitors" :value="comp.id">{{comp.name}}</option>
</select> <button v-on:click="mycomp()">Load Categories</button>
</div>
<div class="custom-select" style="width:200px;">
<select v-model="mcat">
<option v-for="cat in categories" :value="cat.id">{{cat.name}}</option>
</select> <button v-on:click="mycat()">Load Products</button>
<v-app id="inspire" >
<v-data-table
v-model="selected"
:headers="headers"
:items="mproduct"
calculate-widths
item-key="id"
show-select
class="elevation-1 "
>
</v-data-table>
</v-app>
<!-- <div id="products">
<div v-for="pr in mproduct">{{pr.name}}
<input type="checkbox" id="pr.id" :value="pr.id" v-model="checkedProducts"/>
</div>
</div>-->
</div>
</div>
<div class="rightDiv">
<div class="custom-select" style="width:200px;">
<select v-model="clCats">
<option v-for="cat in clientCats" :value="cat.name">{{cat.name}}</option>
</select>
<button v-on:click="myclient()">select</button>
</div>
<div id="clientcats">
<div v-for="(pr,index) in checkedCats">{{pr.name}}
<input type="checkbox" :value="pr.name" v-model="checkedClientCats"/>
<button @click="myclientremove(index)">-</button>
</div>
<div>
<button @click="msend">Save</button>
</div>
</div>
</div>
</div>
</template>
<style>
.myActiveBtn{
/* background-color: green;*/
}
.leftDiv {
background-color: #efefef;
color: #000;
height: 800px;
width: 52%;
float: left;
}
.rightDiv {
background-color: #efefef;
color: #000;
height: 800px;
width: 40%;
float: right;
}
</style>
