Calcite action bar panels with different widths

665
5
Jump to solution
02-06-2023 12:25 PM
GaryB
by
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
UndralBatsukh
Esri Regular Contributor

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. 

View solution in original post

5 Replies
UndralBatsukh
Esri Regular Contributor

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.
0 Kudos
GaryB
by
New Contributor III

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

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

0 Kudos
UndralBatsukh
Esri Regular Contributor

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. 

GaryB
by
New Contributor III

Perfect, thanks so much!

0 Kudos