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

calcite components alignment

LefterisKoumis

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

Finde mehr Beiträge mit dem Tag

Accepted answers

LefterisKoumis

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>

All comments

LefterisKoumis

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>

LefterisKoumis

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.

KittyHurley

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.

Nimm an der Unterhaltung 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.