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

Conditional TimelineOppositeContent messes up timeline alignment #4

Open
bytedream opened this issue Mar 5, 2023 · 1 comment
Open
Labels
bug Something isn't working help wanted Extra attention is needed

Comments

@bytedream
Copy link

When wrapping a <TimelineOppositeContent> block in a svelte if statement, a .opposite-content <div> gets generated even if it shouldn't and messes up the timeline alignment.

<script>
let items = [
  { year: '2023', description: 'The year 2023' },
  { year: '2022', description: 'The year 2022' },
  { year: '2021', description: 'The year 2021' },
]

let opposite = true
</script>

<Timeline position="alternate">
  {#each items as item}
    <TimelineItem>
      {#if opposite}
        <TimelineOppositeContent slot="opposite-content">
          <p class="oposite-content-title">{item.year}</p>
        </TimelineOppositeContent>
      {/if}
      <TimelineSeparator>
        <TimelineDot />
      <TimelineConnector />
      </TimelineSeparator>
      <TimelineContent>
        <p class="content-description">{item.description}</p>
      </TimelineContent>
    </TimelineItem>
  {/each}
</Timeline>

opposite set to true:
image
image

{#if} condition removed or opposite set to false:
image

@bytedream
Copy link
Author

As a dirty fix I currently remove all divs in onMount and in a <script> at the end of the svelte file manually:

<script>
...
let opposite = true

onMount(() => {
  if (opposite) document.querySelectorAll('.opposite-block').forEach(e => e.remove())
})
<script>

<Timeline position="alternate">
...
</Timeline>

{#if opposite}
  <script>
    document.querySelectorAll('.opposite-block').forEach(e => e.remove())
  </script>
{/if}

@K-Sato1995 K-Sato1995 added the bug Something isn't working label Apr 8, 2023
@K-Sato1995 K-Sato1995 added the help wanted Extra attention is needed label Jun 7, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working help wanted Extra attention is needed
Projects
None yet
Development

No branches or pull requests

2 participants