topic calcite components alignment in Calcite Design System Questions

calcite components alignment

LefterisKoumis — Fri, 26 Aug 2022 17:19:51 GMT

I am get trying to get the calcite components line up next to each other but it seems that css is overwritten by the table? Here is an example.

https://codepen.io/lkoumis1/pen/wvmbbYR

Re: calcite components alignment

KittyHurley — Fri, 26 Aug 2022 19:10:32 GMT

Hi @LefterisKoumis, In this case since the actions are related to the FeatureTable widget, you could leverage the widget's properties to add the functionality to the menu using the "menuConfig" property.

For instance:

const featureTable = new FeatureTable({ view: view, layer: featureLayer, // Custom FeatureTable menu items menuConfig: { items: [ { label: "Clear Selection", iconClass: "esri-icon-erase", clickFunction: function (event) { // Clear selection functionality } }, { label: "Export to CSV", iconClass: "esri-icon-download", clickFunction: function (event) { // Export to CSV functionality } } ] }, tableTemplate: { columnTemplates: [ { type: "field", fieldName: "state_name", label: "State", direction: "asc" }, { type: "field", fieldName: "PercentagePrivate", label: "Private school percentage" }, { type: "field", fieldName: "PercentagePublic", label: "Public school percentage" } ] }, container: tableDiv });

Here's a Codepen for the full context.

Re: calcite components alignment

LefterisKoumis — Fri, 26 Aug 2022 19:24:53 GMT

Thank you. I had the components previously setup in the menuConfig, the same way as you mentioned. It is a good solution for a small number of tools. However, since I need to have a longer list of tools to be used for the feature table, it will make a long listing for the user to find the tool they need. To improve user's experience, I think placing the tools on the top of the feature table for easy and quick access is a better approach. Is there a way to deal with the issue that I described? Thanks.

Re: calcite components alignment

LefterisKoumis — Fri, 26 Aug 2022 19:57:29 GMT

I figured it out. The solution was to get the components' div out of the tableDiv, and adjust the height in css.

<div id="appContainer"> <div id="viewDiv"></div> <div id="tableContainer" class="container"> <div id="select-by-rectangle" style="float:left; text-align:center;"> <calcite-button appearance="transparent" color="red" icon-start="selection-x" scale="s">Select by rectangle </calcite-button> </div> <div id="clear-selection" style="float:left; text-align:center;"> <calcite-button appearance="transparent" color="red" icon-start="erase" scale="s">Clear Selection </calcite-button> </div> <div id="ExportInfo" style="float:left; text-align:center"> <calcite-button appearance="transparent" color="red" icon-start="download-to" scale="s">Export to CSV </calcite-button> </div> </div> <div id="tableDiv"></div> </div>