any success with --calcite-label-margin-bottom?

[coryeicher]

Hello,

Has anyone been able to update the calcite variable --calcite-label-margin-bottom and have that take effect?

I have tried applying a style with this variable set to the <CalciteLabel> element, and also to a wrapping <div>, but I do not see any change with either approach. I'm trying to change the calcite label element's margin-bottom from 12. I am working in React and bringing in Calcite via esri/calcite-components-react.

Thanks,

[ReneRubalcava]

You can do it via the :root css.

:root {
    --calcite-label-margin-bottom: 100px; /*LOL*/
}

 That works in a sample I tried it. Might be something with how the framework is loading css too. I would define this in a global css that won't get scoped.

https://codepen.io/odoe/pen/ExEMoBg?editors=1000

[coryeicher]

Hi Rene,

Thanks for the tip. I tried what you recommended and that did not work on
my end. I've been able to update other calcite css variables without issue.

-Cory

[ReneRubalcava]

Do you have a repro app? It might be something like the calcite css loading after your variables are defined, but can't really tell without looking at something.

Ok, so I don't know. I tried this with a regular app using the npm install and calcite and can't override it. Weird, looks like the built code has the values baked in. You might need to try a specific css target or wrap it in a span or div maybe.

[BenElan]

Here is a sample:

https://codesandbox.io/s/calcite-label-margin-bottom-elxnkc?file=/src/App.js

For future reference, Calcite also has an Esri Community which I monitor more closely than this one:

https://community.esri.com/t5/calcite-design-system-questions/bd-p/calcite-design-system-questions

[coryeicher]

Ben, @ReneRubalcava,

Thanks. I see that your sandbox works, but this is not working in my app. I will prepare a repro app.

-Cory

[coryeicher]

@BenElan Here is an app to reproduce (attached .zip). See readme.md for build/run steps

The problematic CalciteLabel wraps an address typeahead, built from a CalciteInput + CalciteDropdown.

I actually found a workaround solution for what I was trying to do, but the original issue appears to remain. Setting this calcite variable does not affect the CalciteLabel containing my address typeahead.

In the code, search this to find the bug...

// *** calcite variable not applied ***

... and search this to find/apply my workaround solution:

/** uncomment for my solution **/

Thanks,

-Cory

[BenElan]

Hmm yeah I'm not sure. It's a pretty big repro app there could be a lot going on. Can you reproduce the issue in a simplified sample? If so I'd be happy to take a closer look.

[BenElan · Accepted solution]

Hi @coryeicher ,

It looks like you are using v0.21.0 of CCR in the repro app. The CSS variable wasn't introduced at that point. It will work in v0.27.0 or later (v0.30.0 is the latest).

The documentation site represents the latest version. If you are stuck on an older version you can use the changelog to determine when a feature was added:

https://github.com/Esri/calcite-components/blob/master/CHANGELOG.md#100-beta84-2022-07-12

You can determine which CC version is being used by a CCR version on the cli:

npm view @esri/calcite-components-react@0.21.0 dependencies["@esri/calcite-components"]

[coryeicher]

Hi @BenElan 

That was it! The variable is working for me after upgrading esri/calcite-components-react to 0.30.0, and also making sure esri/calcite-components is upgraded to 1.0.0-beta.93. 

Thanks again,

-Cory