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

Najděte více příspěvků označených jako

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.

Připojte se k diskusi

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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