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

avi12•5mo 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

Gaming

Programming

Dynamic max-height