How to scroll through selected items in multiple select

[Edward-Ta]

In v4 I implemented my own code inside Select.svelte to make overflow: scroll once my multi select box got to a certain height. The issue that I solved with this can be seen here #388

In v5 the items have been put inside

<div class="svelte-select"> 
  <div class="value-container"> 
    item 1...
  </div>
</div>

I cannot scroll with the outer svelte div like I used to:

<div class="svelte-select" style="overflow: scroll"> 
  item 1...
</div>

Because it's now inside another div inside the svelte-select container, and my possible implementation looks ugly:

v4

v5

Are you able to advise on how to make my scrollable implementation for a max height multi select work?

'Dodgy' select code I wrote before in issue 338

$: value, setTimeout(selectAllCssChanges, 100);
function selectAllCssChanges(){
  let select = document.querySelector(`#${id} .svelte-select`)
  if(select && maxHeightBeforeScroll){
    if(value && select.scrollHeight > maxHeightBeforeScroll){
      select.style.maxHeight = `${maxHeightBeforeScroll}px`
      select.style.overflow = "scroll"
    } else{
      select.style.overflow = "visible"
      select.style.maxHeight = undefined
    }
  }
}

[rob-balfre]

@Edward-Heales added some extra css props for you in 5.4.0, any better?

<Select {items} {value} multiple 
    --height="40px" 
    --max-height="40px"
    --value-container-overflow="scroll"
    --value-container-padding="3px 40px 3px 0"
    --indicators-position="absolute"
    --indicators-top="0"
    --indicators-right="0"
    --indicators-bottom="0"    
/>

[Edward-Ta]

This seems to be working well, thank you for this. indicators-right needs to come in a bit because the scroll takes up some space so I set it to 4%.

--indicators-right="4%"

One thing, do you think it's possible to set --value-container-overflow to "hidden" before --max-height is reached and then change it to "scroll", after max-height is reached? As it looks slightly ugly, or shall I create that for myself because it might not be a requirement for anyone else.

[rob-balfre]

That's what overflow: auto is for I think.

On Mon, 6 Mar 2023, 10:26 pm Edward-HM, @.***> wrote:

This seems to be working well, indicators-right needs to come in a bit because the scroll takes up some space so I set it to 4%.

--indicators-right="4%"

One thing, do you think it's possible to set --value-container-overflow to "hidden" before --max-height is reached and then change it to "scroll", after max-height is reached? Or shall I create that for myself because it might not be a requirement for anyone else.

— Reply to this email directly, view it on GitHub https://github.com/rob-balfre/svelte-select/issues/561#issuecomment-1455958627, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAUAM7U2BR2DDY5BDLAT37LW2XCU5ANCNFSM6AAAAAAVMEJDBA . You are receiving this because you commented.Message ID: @.***>

[Edward-Ta]

That's what overflow: auto is for I think.

Genius.