Calcite Panel: heightScale optional or not

[JoëlHempenius3]

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?

[BenElan · Accepted solution]

Hi @JoëlHempenius3!

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

[GennadiiPrykhodko]

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

[JoëlHempenius3]

@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.

[GennadiiPrykhodko]

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