How to Align Calcite Action Pad to Right Side

ShannonDeArmond · ‎09-11-2023

I have a simple app with a calcite action bar on the left edge of the screen and I would like an action pad on the right. Can anyone advise me how to tweak my code below to nudge the action pad to the upper right?

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>
      Test Site
    </title>

    <link rel="stylesheet" href="css/style.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/4.26/esri/themes/light/main.css"/>
    <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.4.3/calcite.css" />

    <script src="https://js.arcgis.com/4.27/"></script>
    <script src="https://js.arcgis.com/calcite-components/1.4.3/calcite.esm.js" type="module"></script>
    <script src="js/main.js"></script>
  </head>

  <body>
<!--     <calcite-loader></calcite-loader> -->
    <calcite-shell content-behind hidden>
      <h2 id="header-title" slot="header">Title</h2>

      <calcite-shell-panel slot="panel-start" display-mode="float">

        <!-- Defines action pad floating at upper right over map -->
        <calcite-action-pad layout="horizontal" expand-disabled="true" position="end">
          <calcite-action-group>
            <calcite-action text="Add" icon="plus"></calcite-action>
            <calcite-action text="Save" icon="save"></calcite-action>
          </calcite-action-group>
          <calcite-action-group>
            <calcite-action text="Layers" icon="layers"></calcite-action>
            <calcite-action text="Basemaps" icon="layer-basemap"></calcite-action>
          </calcite-action-group>
        </calcite-action-pad>


        <!-- Defines action bar anchored a left side of map -->
        <calcite-action-bar slot="action-bar">
          <calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action>
          <calcite-action data-action-id="basemaps" icon="basemap" text="Basemaps"></calcite-action>
          <calcite-action data-action-id="legend" icon="legend" text="Legend"></calcite-action>
          <calcite-action data-action-id="bookmarks" icon="bookmark" text="Bookmarks"></calcite-action>
          <calcite-action data-action-id="measure" icon="measure" text="Measure"></calcite-action>
          <calcite-action data-action-id="sketch" icon="freehand" text="Sketch"></calcite-action>
          <calcite-action data-action-id="print" icon="print" text="Print"></calcite-action>
        </calcite-action-bar>

        <!-- Map-specific panels for left action bar -->
        <calcite-panel heading="Basemaps" height-scale="l" data-panel-id="basemaps" hidden>
          <div id="basemaps-container"></div>
        </calcite-panel>
        <calcite-panel heading="Legend" height-scale="l" data-panel-id="legend" hidden>
          <div id="legend-container"></div>
        </calcite-panel>
        <calcite-panel heading="Layers" height-scale="l" data-panel-id="layers" hidden>
          <div id="layers-container"></div>
        </calcite-panel>
        <calcite-panel heading="Bookmarks" height-scale="l" data-panel-id="bookmarks" hidden>
          <div id="bookmarks-container"></div>
        </calcite-panel>
        <calcite-panel heading="Sketch" height-scale="l" data-panel-id="sketch" hidden>
          <div id="sketch-container"></div>
        </calcite-panel>
        <calcite-panel heading="Print" height-scale="l" data-panel-id="print" hidden>
          <div id="print-container"></div>
        </calcite-panel>
      </calcite-shell-panel>
      <div id="viewDiv"></div>
</div>
    </calcite-shell>
  </body>
</html>

ShannonDeArmond · ‎09-14-2023

Figured this out. I was nesting the shell panels incorrectly. If it helps anyone in the future, this worked:

    <calcite-shell content-behind hidden>
        <h2 id="header-title" slot="header">Title</h2>

        <calcite-shell-panel slot="panel-end" display-mode="float" width-scale="s">
          <!-- Defines action pad floating at upper right over map -->
          <calcite-action-pad layout="horizontal" expand-disabled="true" position="end">
              <calcite-action id="Add Data" text="Add Data" icon="upload"></calcite-action>
              <!-- put all your actions for the action pad here -->
          </calcite-action-pad>
        </calcite-shell-panel>

        <calcite-shell-panel slot="panel-start" display-mode="float">
        <!-- Defines action bar anchored a left side of map -->
          <calcite-action-bar slot="action-bar">
            <calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action>
            <!-- put all your actions for the action bar here-->
          </calcite-action-bar>
        </calcite-shell-panel>

View solution in original post

ShannonDeArmond · ‎09-14-2023

Figured this out. I was nesting the shell panels incorrectly. If it helps anyone in the future, this worked:

    <calcite-shell content-behind hidden>
        <h2 id="header-title" slot="header">Title</h2>

        <calcite-shell-panel slot="panel-end" display-mode="float" width-scale="s">
          <!-- Defines action pad floating at upper right over map -->
          <calcite-action-pad layout="horizontal" expand-disabled="true" position="end">
              <calcite-action id="Add Data" text="Add Data" icon="upload"></calcite-action>
              <!-- put all your actions for the action pad here -->
          </calcite-action-pad>
        </calcite-shell-panel>

        <calcite-shell-panel slot="panel-start" display-mode="float">
        <!-- Defines action bar anchored a left side of map -->
          <calcite-action-bar slot="action-bar">
            <calcite-action data-action-id="layers" icon="layers" text="Layers"></calcite-action>
            <!-- put all your actions for the action bar here-->
          </calcite-action-bar>
        </calcite-shell-panel>