dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-18 00:56:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix scrolling in Table - Row view

Browse Source 
Use absolute positioning pattern for proper scrolling behavior
when many columns are displayed.
This commit is contained in:
David Pivoňka
2025-12-08 15:23:59 +01:00
parent 38c25cae74
commit 142ebe3d27
1 changed files with 25 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
packages/web/src/celldata/TableCellView.svelte
View File

@@ -196,19 +196,20 @@
</script> </script>
<div class="outer"> <div class="outer">
{#if rowData} <div class="content">
<div class="search-wrapper" on:keydown={handleSearchKeyDown}> {#if rowData}
<SearchBoxWrapper noMargin> <div class="search-wrapper" on:keydown={handleSearchKeyDown}>
<SearchInput placeholder="Filter columns (regex)" bind:value={filter} /> <SearchBoxWrapper noMargin>
<CloseSearchButton bind:filter /> <SearchInput placeholder="Filter columns (regex)" bind:value={filter} />
</SearchBoxWrapper> <CloseSearchButton bind:filter />
</div> </SearchBoxWrapper>
{/if} </div>
<div class="inner"> {/if}
{#if !rowData} <div class="inner">
<div class="no-data">No data selected</div> {#if !rowData}
{:else} <div class="no-data">No data selected</div>
{#each filteredFields as field (field.uniqueName)} {:else}
{#each filteredFields as field (field.uniqueName)}
<div class="field"> <div class="field">
<div class="field-name">{field.columnName}</div> <div class="field-name">{field.columnName}</div>
<div <div
@@ -256,7 +257,8 @@
</div> </div>
</div> </div>
{/each} {/each}
{/if} {/if}
</div>
</div> </div>
</div> </div>
@@ -264,12 +266,21 @@
.outer { .outer {
flex: 1; flex: 1;
position: relative; position: relative;
}
.content {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }
.search-wrapper { .search-wrapper {
padding: 4px 4px 0 4px; padding: 4px 4px 0 4px;
flex-shrink: 0;
} }
.inner { .inner {