Fix padding around sheet not working when scrolling

This commit is contained in:
Andrew Kingston 2023-02-09 08:50:22 +00:00
parent 5eeea14de0
commit 1cbd427d70
1 changed files with 16 additions and 5 deletions

View File

@ -63,7 +63,7 @@
if (!widths?.length) { if (!widths?.length) {
return "--grid: 1fr;" return "--grid: 1fr;"
} }
return `--grid: 50px ${widths.map(x => `${x}px`).join(" ")};` return `--grid: 50px ${widths.map(x => `${x}px`).join(" ")} 180px;`
} }
const handleScroll = e => { const handleScroll = e => {
@ -231,6 +231,8 @@
{field} {field}
</div> </div>
{/each} {/each}
<!-- Horizontal spacer -->
<div />
<!-- All real rows --> <!-- All real rows -->
{#each rows as row, rowIdx (row._id)} {#each rows as row, rowIdx (row._id)}
@ -275,6 +277,8 @@
/> />
</div> </div>
{/each} {/each}
<!-- Horizontal spacer -->
<div />
{/each} {/each}
<!-- New row placeholder --> <!-- New row placeholder -->
@ -298,6 +302,11 @@
on:mouseover={() => (hoveredRow = "new")} on:mouseover={() => (hoveredRow = "new")}
/> />
{/each} {/each}
<!-- Horizontal spacer -->
<div />
<!-- Vertical spacer -->
<div class="vertical-spacer" />
</div> </div>
</div> </div>
</div> </div>
@ -314,14 +323,16 @@
.spreadsheet { .spreadsheet {
display: grid; display: grid;
grid-template-columns: var(--grid); grid-template-columns: var(--grid);
flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
overflow: auto; overflow: auto;
max-height: 1014px; max-height: 800px;
position: relative; position: relative;
padding-bottom: 180px; cursor: default;
padding-right: 100px; }
.vertical-spacer {
grid-column: 1/-1;
height: 180px;
} }
.wrapper ::-webkit-scrollbar-track { .wrapper ::-webkit-scrollbar-track {