Conditional `TimelineOppositeContent` messes up timeline alignment
Opened this issue · 1 comments
bytedream commented
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>
bytedream commented
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}