topic Changing calcite panel width in Calcite Design System Questions

Changing calcite panel width

AdrianaPaese — Mon, 28 Mar 2022 23:32:21 GMT

Hello,

I have ArcGIS API for JavaScript widgets inside calcite panels, acessible through calcite action buttons. How do I change the width of these panels so I can see the whole widget?

Thank you in advance for any guidance

Adriana

<calcite-shell-panel slot="contextual-panel" detached position="end">

<calcite-action-bar slot="action-bar" expand-enabled intl-collapse="Voltar">

<calcite-action data-action-id="home" icon="home" text="Visualizar a extensão padrão">/calcite-action>

<calcite-action data-action-id="basemaps" icon="basemap" text="Selecionar mapa base"></calcite-action>

<calcite-action data-action-id="distMeasurement" icon="measure" text="Calcular distância"></calcite-action>

<calcite-action data-action-id="areaMeasurement" icon="measure-area" text="Calcular área"></calcite-action>

<calcite-action data-action-id="coordconversion" icon="point" text="Converter coordenadas"></calcite-action>

<calcite-action data-action-id="print" icon="print" text="Imprimir"></calcite-action>

</calcite-action-bar>

<calcite-panel heading="Visualizar a extensão padrão" data-panel-id="home" hidden><div id="home-container"></div>

</calcite-panel>

<calcite-panel heading="Selecionar mapa base" data-panel-id="basemaps" hidden>

</calcite-panel>

<calcite-panel heading="Calcular distância" data-panel-id="distMeasurement" hidden>

</calcite-panel>

<calcite-panel heading="Calcular área" data-panel-id="areaMeasurement" hidden>

</calcite-panel>

<calcite-panel heading="Converter coordenadas" data-panel-id="coordconversion" hidden>

</calcite-panel>

<calcite-panel heading="Imprimir" data-panel-id="print" hidden>

</calcite-panel>

</calcite-shell-panel>

Re: Changing calcite panel width

BenElan — Tue, 19 Apr 2022 19:25:49 GMT

Hi @AdrianaPaese,

Panel has a widthScale property, which you can set to "l" (large)

<calcite-panel width-scale="l" heading="Converter coordenadas" data-panel-id="coordconversion"> <div id="coordconversion-container"></div> </calcite-panel>

Re: Changing calcite panel width

JeffreyBurka — Tue, 19 Apr 2022 18:23:45 GMT

Maybe I'm missing something, but the widthScale attribute doesn't seem to actually change anything. That attribute is available on both calcite-shell-panel and calcite-panel, but adding it to either or both of those elements results in no change of width of the display panel!

I'm loading beta 80 of the calcite css and js files from the esri CDN.

Any suggestions on making my panel embedded in a shell panel wider?

Re: Changing calcite panel width

AdrianaPaese — Tue, 19 Apr 2022 18:51:57 GMT

Hi Jeffrey
The way I found to do this was to create a css class for the panel and set
the width there

.panel-side {
padding: 2px;
width: 330px;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 60;
}

Re: Changing calcite panel width

BenElan — Tue, 19 Apr 2022 23:13:44 GMT

If you have a calcite-panel inside of a calcite-shell-panel, it is best to set them to the same widthScale. Here is a codepen demonstrating having the same and different widthScales:

https://codepen.io/benesri/pen/PoEVOrx?editors=1000

Re: Changing calcite panel width

JeffBurka — Thu, 21 Apr 2022 12:27:08 GMT

Thanks. Looking at your code, the issue was that I was using "widthScale" as the attribute in my markup when I should have been using "width-scale".

I gather that's a difference between the declarative syntax for the attribute and the imperative name of the property one would use with the HTMLCalciteShellPanelElement. Is this difference between the two name styles documented anywhere? Or just convention? Does it apply to other camelCase properties in the design system?

Re: Changing calcite panel width

BenElan — Fri, 22 Apr 2022 18:31:25 GMT

@JeffBurka

That is correct.

"width-scale" is an attribute
"widthScale" is a property

Always use "width-scale" when setting the attribute in HTML. In JavaScript, you can use the widthScale property or the "width-scale" attribute with setAttribute:

// these two lines do the same thing document.querySelector("calcite-shell-panel").widthScale = "l"; document.querySelector("calcite-shell-panel").setAttribute("width-scale", "l");

This is a standard convention used throughout the web. Here is another example from MDN about data attributes:

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

To get a data attribute through the dataset object, get the property by the part of the attribute name after data- (note that dashes are converted to camelCase)

The convention applies to all of the camelCase properties in Calcite Components, as well as any native HTML elements (div, h1, ul, etc.) that have attributes with dashes (such as data attributes).