Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Best way of adding padding to the first list item #57

Open
yaeszlo opened this issue Nov 12, 2021 · 1 comment
Open

Best way of adding padding to the first list item #57

yaeszlo opened this issue Nov 12, 2021 · 1 comment

Comments

@yaeszlo
Copy link

yaeszlo commented Nov 12, 2021

I want to add padding to the first item of the list, or fake it somehow, but bottom line is that I want to avoid clipping like this
image

In android I would do that with clipToPadding false, but I wasn't able to find alternative for css. I thought of maybe targeting the first child of the list, but the the list is nested multiple times. Any ideas?

@Corrl
Copy link

Corrl commented Jan 9, 2022

Do you only want to add padding to the very first row?
Then my approach would be to modify the VirtualList.svelte and use the class directive to add the padding to the row

{#each visible as row (row.index)}
  <svelte-virtual-list-row class:first-row={row.index === 0}>
      <slot item={row.data}>Missing template</slot>
  </svelte-virtual-list-row>
{/each}

<style>
  .first-row {
  padding-top: 4rem;
  }
</style>

The first currently displayed row could be targeted via css like this

svelte-virtual-list-row:nth-child(1) {
  padding-top: 4rem;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants