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 element, and also to a wrapping , 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,

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; } } }

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,

Finde mehr Beiträge mit dem Tag

Accepted answers

BenElan

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"]

All comments

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

testapp.zip

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

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"]

Nimm an der Diskussion teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

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