Popover not showing up

LefterisKoumis · ‎05-26-2022

THis simple script works in codepen:

 <calcite-popover label="Example label" reference-element="popover-button">
                  <p style="padding:0 10px;display:flex;flex-direction:row">
                    Popover content here
                  </p>
                </calcite-popover>
                <calcite-link id="popover-button">Activate Popover</calcite-link>

But when I use the same script inside a tab, the popover doesn't appear.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title></title>Test</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>

  <link rel="stylesheet" href="https://js.arcgis.com/4.23/esri/themes/light/main.css" />

  <script type="module">
    import WebMap from "https://js.arcgis.com/next/@arcgis/core/WebMap.js";
    import MapView from "https://js.arcgis.com/next/@arcgis/core/views/MapView.js";

    var map = new WebMap({
      basemap: "streets-vector",
      portalItem: { // autocasts as new PortalItem()
        id: "f2e9b762544945f390ca4ac3671cfa72"
      }
    })


    const view = new MapView({
      map,
      container: "viewDiv",
      center: [-122.475, 39.737],
      zoom: 5
    });
    document.querySelector("calcite-shell").hidden = false;
    document.querySelector("calcite-loader").active = false;
  </script>

</head>

<body translate="no">
  <html>

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

    <script src="https://js.arcgis.com/calcite-components/1.0.0-beta.77/calcite.esm.js" type="module"></script>
    <link rel="stylesheet" href="https://js.arcgis.com/calcite-components/1.0.0-beta.77/calcite.css" />
    <link rel="stylesheet" href="https://js.arcgis.com/4.22/@arcgis/core/assets/esri/themes/light/main.css" />
  </head>
  <style>

  </style>

  <body>
    <calcite-shell content-behind hidden>
      <calcite-shell-panel slot="primary-panel" detached>
      </calcite-shell-panel>

      <!--  ShellPanel slot="contextual-panel"  -->
      <calcite-shell-panel slot="contextual-panel" position="end" detached>
        <calcite-block open heading="Test" style="height:1110px">
          <calcite-tabs>
            <calcite-tab-nav slot="tab-nav" id="thetabs">
              <calcite-tab-title id="tab2" class="tab2" tab="Tab1" active>Tab1
              </calcite-tab-title>
              <calcite-tab tab="Tab1" style="height: 750px;">
                <calcite-popover label="Example label" reference-element="popover-button">
                  <p style="padding:0 10px;display:flex;flex-direction:row">
                    Popover content here
                  </p>
                </calcite-popover>
                <calcite-link id="popover-button">Activate Popover</calcite-link>

              </calcite-tab>

          </calcite-tabs>
        </calcite-block>

      </calcite-shell-panel>

      <div id="viewDiv"></div>
    </calcite-shell>
  </body>
  </html>

KittyHurley · ‎05-27-2022

@LefterisKoumis wrote:
Thank you. It works. However at:
https://developers.arcgis.com/calcite-design-system/components/popover/
there should be a note that popover is depreciated.

Great to hear its working!

Popover is supported, however Popover Manager is the deprecation. We updated the documentation pages and samples to reflect the deprecation.

View solution in original post

KittyHurley · ‎05-27-2022

Hi @LefterisKoumis:

We deprecated the calcite-popover-manager in beta.82, so for older versions of Calcite the calcite-popover-manager is needed. You could also add in the overlay-positioning="fixed" to the calcite-popover to ensure its shown in the container, like so (also full Codepen example):

<calcite-tabs>
    <calcite-tab-nav slot="tab-nav" id="thetabs">
        <calcite-tab-title id="tab2" class="tab2" tab="Tab1" active>Tab1</calcite-tab-title>
    </calcite-tab-nav>
    <calcite-tab tab="Tab1" style="height: 750px;">
        <calcite-popover-manager>
            <calcite-popover overlay-positioning="fixed" label="Example label" reference-element="popover-button">
                <p style="padding:0 10px;display:flex;flex-direction:row">Popover content here</p>
            </calcite-popover>
<calcite-link id="popover-button">Activate Popover</calcite-link>
        </calcite-popover-manager>
    </calcite-tab>
</calcite-tabs>

LefterisKoumis · ‎05-27-2022

Thank you. It works. However at:
https://developers.arcgis.com/calcite-design-system/components/popover/

there should be a note that popover is depreciated.

KittyHurley · ‎05-27-2022

@LefterisKoumis wrote:
Thank you. It works. However at:
https://developers.arcgis.com/calcite-design-system/components/popover/
there should be a note that popover is depreciated.

Great to hear its working!

Popover is supported, however Popover Manager is the deprecation. We updated the documentation pages and samples to reflect the deprecation.

LefterisKoumis · ‎05-27-2022

ok, thanks for the clarification, perhaps should be a note on the popover page that prior to beta.82, popover manager is needed. Not everyone checks the github updates frequently.

KittyHurley · ‎06-03-2022

Thank you for your feedback on updating our documentation to reflect the deprecation, @LefterisKoumis .

As a result of your comment this week we added some notes on the deprecation to the Popover page.