lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

fixed height table

Browse Source
This commit is contained in:
Philipp Dormann 2021-04-07 18:19:58 +02:00
parent 6304116edb
commit 4cad86cf85
1 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
src/components/cards/CardsOverview.svelte
View File

@ -58,7 +58,6 @@
} }
// ----------------- // -----------------
export let wrapperHeight = "500px"; export let wrapperHeight = "500px";
export let wrapperWidth = "1000px";
let scrollTop = 0; let scrollTop = 0;
$: rendered = filtered_cards; $: rendered = filtered_cards;
let innerHeight = 0; let innerHeight = 0;
@ -78,15 +77,16 @@
</script> </script>
<style> <style>
.virtual-wrapper { table tbody {
overflow-y: scroll; display: block;
margin: 0 auto; overflow-y: scroll;
} }
.inner-wrapper {
overflow: hidden; table thead, table tbody tr {
position: relative; display: table;
width: 100%; width: 100%;
} table-layout: fixed;
}
</style> </style>
{#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')} {#if store.state.jwtinfo.userdetails.permissions.includes('CARD:UPDATE')}
@ -163,14 +163,11 @@
</th> </th>
</tr> </tr>
</thead> </thead>
<tbody class="divide-y divide-gray-200"> <tbody class="divide-y divide-gray-200 virtual-wrapper"
<!-- //// -->
<div
class="virtual-wrapper"
on:scroll={updateScroll} on:scroll={updateScroll}
style="height: {wrapperHeight}; width: {wrapperWidth}" style="height: {wrapperHeight}; width:100%"
bind:this={ele}> bind:this={ele}
<div class="inner-wrapper" style="height: {innerHeight}"> >
{#each filtered_cards as card, index} {#each filtered_cards as card, index}
{#if card.code {#if card.code
.toLowerCase() .toLowerCase()
@ -271,8 +268,6 @@
</tr> </tr>
{/if} {/if}
{/each} {/each}
</div>
</div>
</tbody> </tbody>
</table> </table>
</div> </div>