Dynamic max-height

I wish to make the list height transition but only up to a certain height Markup:
<section class="insights-watch-time">
<div class="insights-watch-time__header">
<h1>Top watched channels {periodCurrent[$period]}</h1>
{#if true || channelsList.length > 1}
<button
aria-label="Show all"
class="insights-watch-time__toggle-all-button"
class:insights-watch-time__toggle-all-button--show-all={isShowAll}
on:click={() => (isShowAll = !isShowAll)}>
</button>
{/if}
</div>

<div class="insights-watch-time__list" class:insights-watch-time__list--show-all={isShowAll}>
{#each channelsList.slice(0, isShowAll ? channelsList.length : 1) as channel, i (channel.text)}
<div animate:flip={{ duration: 100 }} class="insights-watch-time__list-item">
<span
class="insights-watch-time__list-item-index"
class:insights-watch-time__list-item-index--show-all={isShowAll}>{i + 1}</span>
<img class="insights-watch-time__channel-picture" src={channel.channelPicture} alt="Channel" />
<div class="insights-watch-time__item">
<a target="_blank" href="https://www.youtube.com/{channel.text}">
{channel.text}
</a>
</div>
<div class="insights-watch-time__time-spent">
{channel.timeSpent}
</div>
</div>
{/each}
</div>
</section>
<section class="insights-watch-time">
<div class="insights-watch-time__header">
<h1>Top watched channels {periodCurrent[$period]}</h1>
{#if true || channelsList.length > 1}
<button
aria-label="Show all"
class="insights-watch-time__toggle-all-button"
class:insights-watch-time__toggle-all-button--show-all={isShowAll}
on:click={() => (isShowAll = !isShowAll)}>
</button>
{/if}
</div>

<div class="insights-watch-time__list" class:insights-watch-time__list--show-all={isShowAll}>
{#each channelsList.slice(0, isShowAll ? channelsList.length : 1) as channel, i (channel.text)}
<div animate:flip={{ duration: 100 }} class="insights-watch-time__list-item">
<span
class="insights-watch-time__list-item-index"
class:insights-watch-time__list-item-index--show-all={isShowAll}>{i + 1}</span>
<img class="insights-watch-time__channel-picture" src={channel.channelPicture} alt="Channel" />
<div class="insights-watch-time__item">
<a target="_blank" href="https://www.youtube.com/{channel.text}">
{channel.text}
</a>
</div>
<div class="insights-watch-time__time-spent">
{channel.timeSpent}
</div>
</div>
{/each}
</div>
</section>
1 Reply
Avi
Avi10mo ago
The list item height is always 80px and the list's max height is 130px Basically, in the initial state the list is 80px, and when expanding, it should expand up to 130px
Want results from more Discord servers?
Add your server