sl-tab-panel overflow-y

[iot49]

How do I get an sl-tab-panel to scroll vertically when the contents are to tall to fit the available space?

The horizontal scroll bar pops up automatically as desired, but the only way I can get a vertical scroll bar to show up is by setting the height to an absolute value:

    sl-tab-panel::part(base) {
      height: 500px;
    }

I am using the component inside a lit element, in case this matters.

BTW: I'm just getting started - so far the library looks great!

Thanks, Bernhard

[KonnorRogers]

@iot49 You shouldn't need to set height to an explicit value. But you will need to set a max-height: to an explicit value.

  sl-tab-panel::part(base) {
    max-height: 500px;
  }

https://codepen.io/paramagicdev/pen/YzgGBdN?editors=1000

We wouldn't want to set explicit max-height in the library because it may be desired behavior for overflowing the tab-panel to cause the entire page to grow.

[iot49]

@KonnorRogers Thank you, this works fine - except for the need to "guess" the value of max-height.

Although I have a solution for this in my specific case, it relies on knowing the size of the surrounding components which makes this fragile. Is there a way for the browser / css to determine the available space automatically?

A detail: I noticed that this seems to work with the sl-tab-panel::part(base) selector as well as just the component selector alone, sl-tab-panel. What's the difference between the two approaches?

[KonnorRogers]

They should both be roughly equivalent, since the overflow is on the ::part(base).

And I'm not sure what you want the browser to do. It really has no way of calculating the "remaining space in the viewport" automatically.

You can wrap everything into a "container", set it to 100vh, and then use flex containers max-heights of 100% to simulate this behavior.

https://codepen.io/paramagicdev/pen/YzgGBdN?editors=1101

2024-01-12.13-28-47.mp4

[iot49]

And I'm not sure what you want the browser to do. It really has no way of calculating the "remaining space in the viewport" automatically.

If I understand correctly (probably not?), it scrolling based on available space works if every slot sets its dimensions (height and width) based on the space it gets from its parent and how it lays out its components. I tried to do that for components I build myself (with mixed success) before I found and switched to this library.

My workaround is to basically do this but somewhere down in the hierarchy where I subtract from 100vh/w the size of whatever is surrounding the element. In some cases (e.g. with split-pane) this has to be done dynamically.

I could imagine a layout system that takes care of this, but it's not easy with css.