calcite-block disablePadding deprecated

[GregoryBologna]

How do I use --calcite-block-padding to remove padding on block?

disablePadding

disable-padding

deprecated Use --calcite-block-padding CSS variable instead.

Here's my code

let block = document.createElement('calcite-block');
block.setAttribute('id', 'pao-accordion-block');
block.setAttribute('heading', 'Buffer Results');
block.setAttribute('description', ' '); // populated on table update
block.setAttribute('collapsible', '');
block.setAttribute('open', '');
block.addEventListener(
	'calciteBlockToggle',
	toggleAccordionBlockDescription
);

[KittyHurley · Accepted solution]

Hi @GregoryBologna, you can set the CSS variable on the component:

calcite-block {
  --calcite-block-padding: 0rem;
}

For setting the CSS variable using JavaScript, can use properties:

block.style.setProperty("--calcite-block-padding", "0rem");

There is a new documentation page on web concepts that includes some guidance on CSS variables releasing this week. Will post an update when the page is available.

[KittyHurley]

Hi @GregoryBologna , we added a new page to the Calcite’s ArcGIS Developers Site around web concepts.

Since we've had a few conversations around a few web component concepts, wanted to share some more in-depth details – if interested in exploring some of the terms further.