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
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