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 action bar panels with different widths

GaryB

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

Vind meer berichten getagd met

Accepted answers

UndralBatsukh

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.

All comments

GaryB

Perfect, thanks so much!

UndralBatsukh

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.

UndralBatsukh

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

GaryB

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

Capture.JPG

UndralBatsukh

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.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Inloggen
Registreren

Snelle Links

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