topic Re: Calcite Panel: heightScale optional or not in Calcite Design System Questions

Calcite Panel: heightScale optional or not

JoëlHempenius3 — Wed, 26 Jan 2022 06:45:21 GMT

Hi,

The documentation (https://developers.arcgis.com/calcite-design-system/components/panel/) on Panel doesn't label heightScale property as optional. Therefore I had this property on my panel. I wanted my panel to take 100% height, like the panels in the Mapviewer, but I couldn't get it right.

Until I dropped the heightScale property, and now it takes 100% available height.

After inspection of the Mapviewer HTML+CSS I noticed that Esri doesn't use the property on the Map viewer Panels either. So I'm assuming the property is indeed optional and the documentation is missing the Optional label. Am I right?

Re: Calcite Panel: heightScale optional or not

BenElan — Wed, 09 Feb 2022 20:32:31 GMT

Hi @JoëlHempenius3!

Thanks for reporting this issue, we will mark the heightScale property as optional in the documentation

Re: Calcite Panel: heightScale optional or not

GennadiiPrykhodko — Tue, 27 Sep 2022 02:37:49 GMT

Hi @JoëlHempenius3!

I dropped height-scale attribute from the panel tag, but struggling for my layer list panel to take 100% height. I was able to do 100% height by changing this property in the Chrome DevTools:

--calcite-shell-panel-detached-max-height: 93vh;

But it does not work in my app.

Which CSS selector and property did you use to achieve this?

Thank you,

Gennadii Prykhodko

Re: Calcite Panel: heightScale optional or not

JoëlHempenius3 — Tue, 27 Sep 2022 07:28:42 GMT

@GennadiiPrykhodko
I didn't add extra CSS to my Panel to achieve the 100% height. I think that this comes by slotting the panel in a shell panel and the div element with 100% height I placed the shell panel in. My suggestion would be to give the parent elements 100% height.

Re: Calcite Panel: heightScale optional or not

GennadiiPrykhodko — Tue, 27 Sep 2022 16:43:10 GMT

Thank you @JoëlHempenius3! Your suggestion did the trick and now my layer list panel is 100% of the view height.

Here is my code pen in case if anyone is trying to do the same thing: https://codepen.io/gprykhodko/pen/zYjporQ