Listbox Component Modal : how to dynamical adjust the height & make it scrollable

[ayaphi]

Hi and thanks for the great library !

I would like to use the Listbox Component Modal, using the code from the Docs with a lot of items - hence I am in the need to make it scrollable, not the entire modal, just the listbox.

I am using <svelte:window bind:innerWidth bind:innerHeight /> to get the inner height and subtract some padding in a reactive svelte statement (project runs still with svelte 4 by the way and Skeleton UI 2.10.3), to get the target height of the listbox : $: listboxHeight = innerHeight > padding ? (innerHeight - padding) : 20;

But I found no way to apply the dynamic height to the styling of the Listbox - and I already noticed that Tailwind CSS does not like interpolated strings as described in the JIT docs, so I tried to use inline styles as mentioned in the docs.

But this inline style does not even work with a hardcoded value of 600 px : <ListBox class="border border-surface-500 p-4 rounded-container-token overflow-y-auto" style="height: 600px;" >

My aim is to use the reactive statement triggered version : <ListBox class="border border-surface-500 p-4 rounded-container-token overflow-y-auto" style="height: {listboxHeight}px;" >

This technique works just fine with a <div> - so maybe there is some other styling in the implementation of the modal or listbox that overrides the height inline style?

What works fine, is a fixed height of e.g. 600px the Tailwind way: <ListBox class="border border-surface-500 p-4 rounded-container-token overflow-y-auto h-[600px]" >, but this is static and I cannot integrate a dynamic value in Tailwind classes as mentioned in their docs.

I also noticed that my listbox has uses no rounded borders (but the one in the live example does use rounded ones), so I might missing a correct setup for the Design Tokens - as the example code uses the class rounded-container-token.

Any ideas? - thanks in advance.

[endigo9740]

Hey @ayaphi thanks for the kind words.

It looks like you're close here:

But this inline style does not even work with a hardcoded value of 600 px :

However, you went a bit "off script" with the style attribute. Skeleton actually doesn't support style attributes for components because everything is class-based. In this can you should just move the fixed height within your list of classes. Which it looks like you did.

What works fine, is a fixed height of e.g. 600px the Tailwind way: , but this is static and I cannot integrate a dynamic value in Tailwind classes as mentioned in their docs.

Can you explain what you mean by dynamic here. I'd assume you're trying to implement perhaps responsive breakpoints? If so Tailwind supports a means to handle this out of the box:
https://tailwindcss.com/docs/responsive-design

If you for some reason need finer grain control - say via Javascript, then you will need to swap out the classes. Taking care to write out the classes verbatim in your JS logic. As you cannot dynamically construct Tailwind classes:
https://tailwindcss.com/docs/content-configuration#dynamic-class-names

Here's a very simple example of how we handle that with a ternary, but the logic could work for if/if-else/else or switch statements:
https://www.skeleton.dev/docs/contributing/style-guide#dynamic-classes

I also noticed that my listbox has uses no rounded borders (but the one in the live example does use rounded ones), so I might missing a correct setup for the Design Tokens - as the example code uses the class rounded-container-token.

We took a fairly un-opinionated approach to design of this component in Skeleton v2. So the design is mostly up to you, per the examples show.

[ayaphi]

Hi @endigo9740,

well, "off script" is the way creatives "do stuff"  😉 ... but of course, I can imagine that you have to design your library & components in certain conceptional & technical constraints - that's how native digitals (aka computer, operating systems & alike) wants us to do stuff (align to their inner mechanics).

Thanks for you for your detailed answer - I got it, thanks to your descriptions and links.

One essential take away for me : I can only use Tailwind CSS classes, even if I inject them into the class property like listboxCss in <ListBox class="border border-surface-500 p-4 rounded-container-token overflow-y-auto {listboxCss}" >.

I tried to use a native CSS class but that did not work - which makes sense after I read the docs you have linked : "Note the parent element classes includes $$props.classes to enable arbitrary classes passed by the user via class="my-custom-class"."

The point : as a library user it looks like we use the native class attribute inside Skeleton UI Components, but we do not - it's a kind of exported prop. Then it makes sense that custom native CSS classes do not work.

+++

What I meant with dynamic : I want to be responsive to changes in height - which means, if the user changes the height of the browser window, I want to adjust the height of the Listbox.

As Tailwinds CSS responsive design feature only handles width, I implemented my own responsive height feature like so

   const padding = 300;

   let innerWidth = 0;
   let innerHeight = 0;
   let listboxHeight = 0;
   let listboxCss = 'h-[600px]';

   $: {

      listboxHeight = innerHeight > padding ? (innerHeight - padding) : 20;

      if (listboxHeight > 1000) {
         listboxCss = 'h-[1000px]';
      } else if (listboxHeight > 800 && listboxHeight <= 1000) {
         listboxCss = 'h-[800px]';
      }else if (listboxHeight > 600 && listboxHeight <= 800) {
         listboxCss = 'h-[600px]';
      } else if (listboxHeight > 400 && listboxHeight <= 600) {
         listboxCss = 'h-[400px]';
      } else {
         listboxCss = 'h-[300px]';
      }
   } 

   <svelte:window bind:innerWidth bind:innerHeight />

Together with <ListBox class="border border-surface-500 p-4 rounded-container-token overflow-y-auto {listboxCss}" > it works.

Its not that elegant as I wanted it in the first place - making the changes fluid, so that the listbox has always a height of innerHeight - padding, but it's okay for me now.

Just out of curiosity : isn't it a common request to make HTML elements "height reactive" and isn't there a native Tailwind CSS way of doing it - similar to native CSS and its calc feature?

So something like the following the Tailwind CSS way

<style>
   .scrollable {
      height: calc(100vh - 300px);
   }
</style>

+++

Regarding your design token system, I have not researched yet, why I do not get the rounded behaviour, but I will take a look at that later and will report back, why it did not work out of the box for me and how I resolved it (hopefully 🙃) ... but that's a minor thing.

Again, thanks for your efforts on this library - it really helps to build nice Web-UIs with Svelte & Tailwind ... awesome work!

[endigo9740]

@ayaphi glad to help! Im short on time, so quick reply to the points above:

One essential take away for me : I can only use Tailwind CSS classes, even if I inject them into the class property like

Correct, you'll be hard pressed to find a situation where that can't be solved with Tailwind or Tailwind arbitrary syntax in favor of style attribute values.

The point : as a library user it looks like we use the native class attribute inside Skeleton UI Components, but we do not - it's a kind of exported prop. Then it makes sense that custom native CSS classes do not work.

Every component implements a means to use a generic class attribute similar to an HTML element. Remember this is not native to components, because they're components not elements! But for familiarity we do this to enable extending the class list with arbitrary values.

What I meant with dynamic : I want to be responsive to changes in height - which means, if the user changes the height of the browser window, I want to adjust the height of the Listbox.

Maybe consider using Tailwind's arbitrary syntax + custom media queries. Tailwind strangely only implements media queries based on viewport width, but it's totally normal to base these on the viewport height as well. You'll just need to use this syntax:
tailwindlabs/tailwindcss#12788 (comment)

So something like the following the Tailwind CSS way

Yes it's possible to use calc with Tailwind - unfortunately I don't have an example off hand.

Regarding your design token system, I have not researched yet, why I do not get the rounded behaviour, but I will take a look at that later and will report back, why it did not work out of the box for me and how I resolved it (hopefully 🙃) ... but that's a minor thing.

I might suggest viewing some of the changes coming in v3 before you commit too much to learning v2. We're actually doing away with this "concept" in favor of just referring to these as what they are - Skeleton-provided utility classes. They just happen to be defined via settings obtained from your theme.

[ayaphi]

Thanks @endigo9740 again for taking some time and your inspiring idea to implement media queries on viewport height with Tailwind's arbitrary syntax.

After I got the basics done I will take a look into it - using calc in combination with Tailwind sounds promising and I'm sure searchbots will help me out with a sample or hint me in the right direction ;-).

+++

Regarding the "rounded border" issue with design tokens - dumb errors of mine, these were 🤪.

(1.) using a theme that has no rounded border (rocket) and (2.) using a theme (wintry) that uses round borders (sets the CSS variable to a value other than 0 px), but missing to add it to the array of themes in tailwind.config.ts.

Solving these, it works just fine - its just a matter of being aware how all the pieces work hand in hand (or in a chain), which means (to my past self ;-) : read ALL relevant parts of the docs, try it out in simple examples (in isolation) and become a happy user ☀️.