topic Re: Calcite action bar panels with different widths in ArcGIS JavaScript Maps SDK Questions

Calcite action bar panels with different widths

GaryB — Mon, 06 Feb 2023 20:25:54 GMT

Hello,

A while back @JuliePowell helped me with this code pen which showed how to have action bar panels with different widths. If you update the CodePen to use 4.25, Calcite beta 99, and change the slot from "primary-panel" to "panel-start" it still works, however, when I upgrade to Calcite version 1.03 it no longer works and I can't figure out how to get it working again. Any advice would be greatly appreciated.

Thanks!

Gary

Re: Calcite action bar panels with different widths

UndralBatsukh — Tue, 07 Feb 2023 16:31:38 GMT

Hi there,

There were breaking changes between different versions and this doc outlines the changes you need to look out for. https://github.com/Esri/calcite-components/releases/tag/v1.0.0-beta.99

Going forward there should not be breaking changes and the calcite components will work as they are between versions.

I updated the codepen to reflect the changes in 1.03. https://codepen.io/U_B_U/pen/xxJeejZ?editors=1000

I updated just slot property on calcite-shell-panel based on following breaking change. I did not test the rest but the breaking changes should point you in the right direction.
<calcite-shell-panel id="primary-panel" slot="panel-start" position="start" detached>

shell:
Removed the slot primary-panel, use panel-start instead.
Removed the slot contextual-panel, use panel-end instead.

Re: Calcite action bar panels with different widths

GaryB — Tue, 07 Feb 2023 16:44:19 GMT

Undral, Thanks for taking a look at this. Your updated codepen clearly shows the issue when compared to the original one in my post. In the attached image, the Charts panel is larger in Julie's codepen (left side). In your CodePen, the Charts panel is no longer larger and is the same size as the other panels.

Thanks!

Gary

Re: Calcite action bar panels with different widths

UndralBatsukh — Tue, 07 Feb 2023 17:28:57 GMT

I completely misread your original question.... Just opened the codepen and made changes. Anyway, I'll look again.

Re: Calcite action bar panels with different widths

UndralBatsukh — Tue, 07 Feb 2023 22:05:45 GMT

So I had to ask around how it is done. The codepen is now updated: https://codepen.io/U_B_U/pen/xxJeejZ?editors=0100

I apologize for the confusion above. I just did not read the question completely. Just assumed you are asking how to show the calcite components.

Re: Calcite action bar panels with different widths

GaryB — Wed, 08 Feb 2023 00:24:08 GMT

Perfect, thanks so much!