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

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.