Latest Contributions by BenElan

‎09-14-2022

You just want to set the width of the Input Date Picker right? You can do that with CSS: <calcite-input-date-picker range style="width:260px" scale="s" overlay-positioning="fixed"> </calcite-input-date-picker> Or am I misunderstanding the question?

‎09-01-2022

Hi @baohuachu2, thank you for reporting this problem! I have created an issue which you can keep an eye on for progress updates: https://github.com/Esri/calcite-components/issues/5258

‎08-30-2022

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

‎08-30-2022

Hi @GregoryBologna It would probably be easier to add a conditional in the event listener's callback function (handleTaxParcelTypesChange), rather than dynamically adding/removing the listener. Here is an example: https://codepen.io/benesri/pen/bGvXZgz?editors=0011

‎08-26-2022

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.

‎08-22-2022

Clicking the Panel's back button removes the Panel from the DOM for performance. That means you will need to recreate the element if the user drills into the "details" Panel again. Here is an example: https://codepen.io/benesri/pen/poLYOdY?editors=0010 I didn't have an example using the React components but the idea is the same. If you have any difficulties converting the code to React let me know, I'm happy to help.

‎08-22-2022

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

‎08-08-2022

Hi @baohuachu2, Action Menu isn't fully supported at this time, which is why it is not in the public facing documentation. We hope to clean it up and support it for the public in the future.

‎08-03-2022

For the second screenshot, it is possible just not fully supported at the moment. Here is a codepen: https://codepen.io/benesri/pen/GRxxNPb

‎08-01-2022

Also make sure you are using at least Calcite Components (CC) v1.0.0-beta.81 and/or its corresponding Calcite Components React (CCR) version, which is v0.22.0. A bug fix for nested tabs was released with beta.81: https://github.com/Esri/calcite-components/pull/4250 FYI - you can check which version of CC is being used by CCR with this shell command: npm view @esri/calcite-components-react@0.22.0 dependencies.@esri/calcite-components

‎08-01-2022

Oh sorry, I misunderstood. Hmm not sure what's going on. I wasn't able to reproduce it in this codesandbox: https://codesandbox.io/s/ccr-nested-tabs-lp7ei6?file=/src/App.js Are there any errors in the browser console? Have you tried using the CCR components that you are importing? You're also importing React from Experience Buidler; they may be customizing something on their end that is causing the issue. I suggest asking this in the Experience Builder community, hopefully they some insight.

‎08-01-2022

That is expected. The nested Tabs is the content for the first parent Tab. The content for the second parent Tab is just "Tab 2 Content". The code I provided has the same behavior. Isn't that what you were looking for?

‎08-01-2022

We do not support vertical tabs at the moment. You can use a vertical Stepper or an Action Bar instead

‎08-01-2022

FYI I did create an issue to allow setting the background color for Avatars, however we don't plan on allowing three letters. So as you mentioned SVG is your best bet.

‎07-11-2022

Hi @BenPitcairn, You can use avatar's thumbnail property to display an image. You can create the image in whatever color/letters/style you want! Here is an example: https://codepen.io/benesri/pen/wvmWZBR Note: Using an image with text is not accessible. The colors we use in avatar also consider contrast ratio guidelines.

Online Status	Offline
Date Last Visited	‎02-03-2023 03:22 AM

My Ideas

Latest Contributions by BenElan

Re: Can "input-date-picker" component's width style be narrower?

Re: Date picker issue for local language setting "zh-CN"

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

Re: Select all calcite-pick-list-item(s) without a calciteListChange event

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

Re: Managing calcite-panels within calcite-flow in react

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

Re: calcite-action-menu missing in document

Re: Menu for navigation is required.

Re: Multi level tabs

Re: Multi level tabs

Re: Multi level tabs

Re: Multi level tabs

Re: Avatar - choose colour and 3 character ID display

Re: Avatar - choose colour and 3 character ID display

Re: Calcite Maps - Shell Panel

Re: Calcite Tabs creating ResizeObserver type erro...

Re: any success with --calcite-label-margin-bottom...

Re: any success with --calcite-label-margin-bottom...

Re: Managing calcite-panels within calcite-flow in...