topic Re: heightScale not working in shell-panel? in Calcite Design System Questions

heightScale not working in shell-panel?

LefterisKoumis — Wed, 08 Nov 2023 19:47:02 GMT

I have this simple shell panel positioned at the end. It seems that regardless the specified heightScale value (l, m, s), the shell panel does not change its height.

My perception is that if we use heightScale value "s", then the end panel should be short to show the content of the page after its bottom edge.

https://codepen.io/lkoumis1/pen/mdvWjev?editors=1000

@BenElan @KittyHurley

Re: heightScale not working in shell-panel?

KittyHurley — Tue, 28 Nov 2023 21:51:07 GMT

@LefterisKoumis Thanks for pointing this out - the "heightScale" property can only be set when the "layout" is set to "horizontal". The documentation page lists all types of "layouts", and will be updated to reflect the change in the near future.

To modify the height when "layout" is set to "vertical", you can use CSS to alter the height of the content desired, in particular with the Panel, so the Action Bar isn't affected by the height. Could also add Shell's "content-behind" attribute to float over the remaining content.

For instance: https://codepen.io/geospatialem/pen/YzBjrJx

Re: heightScale not working in shell-panel?

LefterisKoumis — Tue, 06 Aug 2024 22:00:41 GMT

Hello Kitty. Thank you for the above solution. When I tried to use a table in a calcite-shell-center-row so it spans across the bottom and under the panel located inside the calcite-shell-panel slot="panel-end" it stops right at the left edge of the panel. Is it possible to span the table or does the panel at the panel-end occupies that space? Thank you.

Re: heightScale not working in shell-panel?

KittyHurley — Wed, 07 Aug 2024 16:58:23 GMT

@LefterisKoumis You could use the Shell's "panel-start" or "panel-end" slots, for instance: https://codepen.io/geospatialem/pen/bGPrNwK. You could also adjust the height and width of the Shell Panel and its contents using CSS variables.

Re: heightScale not working in shell-panel?

LefterisKoumis — Fri, 09 Aug 2024 21:19:37 GMT