nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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?

Trouver plus de publications taguées avec

Accepted answers

BenElan

Hi @JoëlHempenius3!

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

All comments

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

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

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

BenElan

Hi @JoëlHempenius3!

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

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Liens rapides

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.