Select to view content in your preferred language

Calcite Panel: heightScale optional or not

1333
4
Jump to solution
01-25-2022 10:45 PM
JoëlHempenius3
Frequent Contributor

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?

 

-Joël Hempenius.

Languages: JavaScript, Python and Dunglish
1 Solution

Accepted Solutions
BenElan
Esri Contributor

Hi @JoëlHempenius3!

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

View solution in original post

4 Replies
BenElan
Esri Contributor

Hi @JoëlHempenius3!

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

GennadiiPrykhodko
Emerging Contributor

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

0 Kudos
JoëlHempenius3
Frequent Contributor

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

-Joël Hempenius.

Languages: JavaScript, Python and Dunglish
0 Kudos
GennadiiPrykhodko
Emerging Contributor

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