calcite shell panel display help

DeanWilson — Thu, 25 Sep 2025 15:08:19 GMT

I'm attempting to kind of mimic the foldable theme from web appbuilder into the calcite design system via web components. I have almost all of it completely developed except for the attribute table widget (normally at the bottom of the application). Looking at this screenshot:

You can see that the shell panel is set to the panel-end slot. When it's like this, anything put into the panel-bottom slot loses that width. Like in this screenshot:

Now. If I assign to panel-top for the ui components instead of the panel-end slot, it indeed gives me full width on the panel-bottom attached calcite-shell-panel. The problem is now my ui components are shifted to the left, as in this screenshot:

I tried flexing them in css to justify-content at the end but to no avail. I have other issues I need to address but this is the first one I'm trying to tackle and can't seem to find a resolution. Any thoughts to how I can accomplish this? Claude has been no help. LOL

Thanks in advance!

Dean Wilson

Re: calcite shell panel display help

DeanWilson — Mon, 29 Sep 2025 17:08:53 GMT

Bump!

Re: calcite shell panel display help

DeanWilson — Fri, 03 Oct 2025 15:32:52 GMT

I just said forget it and I'm using my own shell setup with media queries. Seems to be working out great now.

topic calcite shell panel display help in Calcite Design System Questions

calcite shell panel display help

Re: calcite shell panel display help

Re: calcite shell panel display help