Exactly as the title says, my overflow-x scrollbar is hidden at the bottom of the overflow y scrollbar. Is there anyway to fix this?
Right now the height and width are coming from the parent .wrapper div, but the overflow-x, while commented out, seems to be automatically set to scroll.
Any advice would be greatly appreciated!
<template>
<div class="wrapper">
<vue-good-table
style="width: 100%"
class="issue-tracker-style"
:columns="columns"
:rows="rows"
:sort-options="{
enabled: false,
}"
>
<template v-slot:table-row="scope">
<div>
<div>{{ scope.formattedRow[scope.column.field] }}</div>
</div>
</template>
</vue-good-table>
</div>
</template>
<script>
export default {
name: "my-component",
mounted: function () {
let tdElm;
let startOffset;
Array.prototype.forEach.call(
document.querySelectorAll("table th"),
function (td) {
td.style.position = "relative";
//td.style.maxWidth = "unset";
let grip = document.createElement("div");
grip.innerHTML = " ";
grip.style.position = "absolute";
grip.style.top = 0;
grip.style.right = 0;
grip.style.bottom = 0;
grip.style.width = "5px";
// grip.style.background = "red";
grip.style.cursor = "col-resize";
grip.addEventListener("mousedown", function (e) {
tdElm = td;
startOffset = td.offsetWidth - e.pageX;
});
td.appendChild(grip);
}
);
document.addEventListener("mousemove", function (e) {
if (tdElm) {
tdElm.style.minWidth = startOffset + e.pageX + "px";
}
});
document.addEventListener("mouseup", function () {
tdElm = undefined;
});
},
data() {
return {
columns: [
{
label: "Name",
field: "name",
//width: "100px"
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
{
label: "Name",
field: "name",
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
{
label: "Name",
field: "name",
},
{
label: "Age",
field: "age",
type: "number",
},
{
label: "Created On",
field: "createdAt",
dateInputFormat: "yyyy-MM-dd",
dateOutputFormat: "MMM do yy",
},
{
label: "Percent",
field: "score",
type: "percentage",
},
],
rows: [
{ id: 1, name: "John", age: 20, createdAt: "", score: 0.03343 },
{
id: 2,
name: "Jane Jacob Johnson OOOO",
age: 24,
createdAt: "2011-10-31",
score: 0.03343,
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343,
},
{
id: 4,
name: "Chris",
age: 55,
createdAt: "2011-10-11",
score: 0.03343,
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343,
},
{
id: 6,
name: "John",
age: 20,
createdAt: "2011-10-31",
score: 0.03343,
},
{
id: 3,
name: "Susan",
age: 16,
createdAt: "2011-10-30",
score: 0.03343,
},
{
id: 4,
name: "Chris",
age: 55,
createdAt: "2011-10-11",
score: 0.03343,
},
{
id: 5,
name: "Dan",
age: 40,
createdAt: "2011-10-21",
score: 0.03343,
},
{
id: 6,
name: "John",
age: 20,
createdAt: "2011-10-31",
score: 0.03343,
},
],
};
},
};
</script>
<style lang="scss">
.wrapper {
border: 1px solid red;
width: 400px;
height: 200px;
overflow-y: scroll;
/* overflow-x: scroll; */
}
body {
display: flex;
justify-content: center;
margin-top: 5rem;
}
.issue-tracker-style {
font-family: "Inter";
width: 100%;
.vgt-inner-wrap {
box-shadow: none;
}
td > div {
position: relative;
width: 100%;
height: 100%;
}
td > div > div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
}
thead {
border: 1px solid #f0f7ff;
}
tr {
background: white;
margin: 0;
height: 32px; // height works like min-height apparently https://stackoverflow.com/questions/19432092/can-i-use-a-min-height-for-table-tr-or-td/37115413
}
td {
min-width: 70px;
overflow: hidden;
white-space: nowrap;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
tr th {
color: #4859af;
font-weight: 600;
height: 100%;
vertical-align: middle;
padding: 0.5rem 0;
font-size: 13px;
background: #fafafa;
border: 2px solid #efeff0;
text-align: center;
overflow: hidden;
white-space: nowrap;
-moz-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
tr td {
padding: 0;
font-size: 13px;
color: #4859af;
background: white;
border: 2px solid #efeff0;
height: 42px;
vertical-align: middle;
}
tr td,
tr th {
text-align: center;
}
/*tr th {
width: 60px !important;
}*/
}
</style>
