Drawer, Tab Group and height

[chdenat]

I have such structure:

<sl-drawer placement="end">
  <header>
  <sl-tabgroup>
    <sl-tab>
    <sl-tab>
    <sl-tab-panel>
    <sl-tab-panel>
  </sl-tabgroup>
  <footer>
</sl-drawer>

The header and footer are correct at the top and bottom, but the height of the tab panels is not adapted to the remaining vertical space and is too long.

Adding a scroll bar makes it possible to see part of the text, but the lower part remains hidden (even when the drawer has no footer).
I've played with css but haven't found a solution.

Any ideas?

Thanks a lot.

[claviska]

Is this what you're looking for?

https://codepen.io/claviska/pen/mdZJRLw?editors=1100

[chdenat]

Cory,

Yes, except that I want to scroll vertically the tab-panel content if needed.

I've found the solution few minutes ago.

The CSS should be

sl-tab-group::part(base),
sl-tab-group::part(body),
sl-tab-panel::part(base),
sl-tab-panel::part(body),
sl-tab-panel,sl-tab-group {
    max-height: 100%;
    height: 100%;
}
sl-tab-panel::part(base) {
    padding-bottom: 1px; /* do not know why I lost 1pixel...? It should be some border* /
    overflow-x:hidden;
}

AsI'm using Scrollbars components from 'react-custom-scrollbars' to have consistent scrollbars over the browsers, the tab panel content should be :

<Scrollbars style={{height: '100%'}}>bla bla</Scrollbars>

Thanks

[chdenat]

Cory,

Yes, except that I want to scroll vertically the tab-panel content if needed.

I've found the solution few minutes ago.

The CSS should be

sl-tab-group::part(base),
sl-tab-group::part(body),
sl-tab-panel::part(base),
sl-tab-panel::part(body),
sl-tab-panel,sl-tab-group {
    max-height: 100%;
    height: 100%;
}
sl-tab-panel::part(base) {
    padding-bottom: 1px; /* do not know why I lost 1pixel...? It should be some border* /
    overflow-x:hidden;
}

As I'm using Scrollbars components from 'react-custom-scrollbars' to have consistent scrollbars over the browsers, the tab panel content should be:

<Scrollbars style={{height: '100%'}}>
            bla bla
</Scrollbars>

Thanks