Latest Contributions by FC_Basson

‎12-01-2023

The duplicate IDs warnings are generated when strict HTML guidelines are applied by the browser, which is fine with me. The calcite-block chevron toggle buttons should not have the same ID of "toggle", but instead just the "toggle" class, which would be similar to the calcite-accordion-item chevron dropdown button. So maybe the Calcite team can have a look at this for future releases @KittyHurley ?

‎11-29-2023

Hi @MattDriscoll. I'm not able to recreate the results outside of my existing code base. Noted that the elements with the same IDs are indeed in a different DOM root. The first line of the warnings is this: [DOM] Found 24 elements with non-unique id #toggle: (More info: https://www.chromium.org/developers/design-documents/create-amazing-password-forms) Which led me to observing the following: I have a calcite-input element of type "password" inside a calcite-modal (hidden at startup). If I change the calcite-input type to "text", the ID errors do not show up. If I set the type back to "password" after the page has loaded, the ID warnings immediately appear in the console. It also seems that the issue is related with the autocomplete property of the input.

‎11-24-2023

These warnings are popping up during page load in Chrome, which indicates that there are multiple elements being created with the same ID. These elements are all linked to the chevron (collapse toggle) button of a "calcite-block" and are all given the same "id" attribute value of "toggle". Is there any way to prevent this?

‎11-09-2023

Hi Jose Here is a codepen for 4.27: https://codepen.io/fcbasson/pen/abXWLOz . Once you activate a drawing tool, the view "click" event still fires. If you change the version to 4.28, the behaviour changes. I also had a look at the "immediate-click" event and it might be the solution to my issue. I'll do some further testing and get back to you. PS: I did some testing with the "immediate-click" event and that seems to solve my issue.

‎11-08-2023

In 4.27, the view could listen and respond to click events (e.g. right click) while in drawing mode (activeTool not null or reshape/transform). Now with 4.28, when you are in drawing mode, the view event listener for click events is not firing at all. Only once the Sketch tool activeTool returns to null or reshape/transform, the view click events are working. How can I set up the view to listen for click events while the activeTool is in draw mode?

‎11-07-2023

The calcite-list-item does not have an "icon" property. https://developers.arcgis.com/calcite-design-system/components/list-item/#properties Not sure where you want the icon displayed, but you can set a calcite-icon in one of the "content" slots. So instead of setting the "icon" attribute, set the item innerHTML to something like this: item.innerHTML = '<calcite-icon icon="layer" slot="content-start"></calcite-icon>'; The completed element should look like this: <calcite-list-item label="My label" description="My description" value="myvalue"> <calcite-icon icon="layer" slot="content-start"></calcite-icon> </calcite-list-item>

‎11-06-2023

With the new Calcite 1.10.0 components, a vertical scroll bar is now showing up in the calcite-tab component. I've noticed that the "content" class of the shadow-root for calcite-tab now has a new property that adds a padding-block of 0.5rem. Here is a Codepen showing the result: https://codepen.io/fcbasson/pen/rNPjPYM Removing or disabling the "padding-block" property also takes care of the vertical scroll bar. This behaviour manifests in a calcite-tab (with a calcite-tab-nav) hosted inside a calcite-panel. It does not happen with Calcite 1.9.2 components. How can I get rid of the extra padding and vertical scroll bar inside the calcite-tab?

‎05-01-2023

Try putting the panel content, i.e. the divs for each of the calcite-notice, within a single containing div, which acts as the panel default content container.

‎04-19-2023

The font color of the "label" attribute of the calcite-list-item is specified by the --calcite-ui-text-1 CSS root variable color. Try setting the calcite-list-item label like this: calcite-list-item{ --calcite-ui-text-1: #f00; } You can also set the global color property for the framework colors: :root{ --calcite-ui-text-1: #f00 !important; } "!important" is required to overwrite the default theme colors. More info here: https://developers.arcgis.com/calcite-design-system/core-concepts/

‎02-26-2023

Thanks @KittyHurley That works for me.

‎02-24-2023

Issue appears in Calcite version 1.0.7 (and earlier versions). I'm noticing a downward vertical offset of the calcite-dropdown list when it is put inside a calcite-block with a heading property. When the block heading property is removed, the list appears in the correct position directly below the list. Here is a Codepen to replicate the issue: https://codepen.io/fcbasson/full/KKxMLgJ

‎01-19-2023

I need some clarity on the TypeError being generated for Calcite Tabs. It seems the error is generated during the DOM rendering when the tabs are not directly visible in the DOM body, but instead in a parent element such as a calcite-panel. The line in the module where the error occurs upon creating a new class reads as follows: this.activeIndicatorEl.style.transitionDuration = "0s" It seems as if the "activeIndicatorEl" property is not found. I have created a CodePen (https://codepen.io/fcbasson/pen/KKByZzV) with two sets of tabs, of which one is within a panel. Have a look at the browser console when the DOM is rendered to see the errors popping up.

‎09-27-2022

Hi Are you using the latest release (1.0.0-beta.94)? The "start" and "end" properties have been deprecated and should be replaced with "min" and "max" properties. https://developers.arcgis.com/calcite-design-system/components/date-picker/#api-reference <calcite-date-picker min="2022-01-01" max="2022-12-31" value="2022-09-27"></calcite-date-picker>

‎08-23-2022

Thanks @KittyHurley . I've reverted to .86 in the meantime.

‎08-23-2022

With the Calcite 1.0.0-beta.91 release, the action bar is hidden behind the map and the action buttons are "disabled". Even in the sample (https://developers.arcgis.com/calcite-design-system/tutorials/create-a-mapping-app/) this behaviour persists. This was not the case with the 1.0.0-beta.86 release. How do I fix this?

Online Status	Offline
Date Last Visited	‎06-02-2026 12:31 AM

My Ideas

Latest Contributions by FC_Basson

Re: Non-unique IDs created for collapsible calcite-block chevron button

Re: Non-unique IDs created for collapsible calcite-block chevron button

Non-unique IDs created for collapsible calcite-block chevron button

Re: 4.28 Sketch Tool - View click events not working in draw mode

4.28 Sketch Tool - View click events not working in draw mode

Re: Setting a calcite-list-item icon in JS code (4x)

Calcite 1.10.0 content class causing overflow scroll

Re: Cannot align horizonally inside calcite-panel

Re: Adding color or background color to a Calcite list item

Re: Calcite Block heading causing dropdown list shift

Calcite Block heading causing dropdown list shift

Calcite Tabs creating ResizeObserver type error during DOM rendering (v1.0.0-beta.99)

Re: How to initialize the value for Input Date Picker component

Re: Action bar hidden behind map with Calcite 1.0.0-beta.91

Action bar hidden behind map with Calcite 1.0.0-beta.91

AGOL custom web map URL parameters not working for...

Re: Features Component close event error - removes...

Re: Graphics Layers not showing in MapView - possi...

Re: Graphics Layers not showing in MapView - possi...

Re: Graphics Layers not showing in MapView - possi...