topic Re: Popover not showing up in Calcite Design System Questions

Popover not showing up

LefterisKoumis — Fri, 27 May 2022 01:15:52 GMT

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

Re: Popover not showing up

KittyHurley — Fri, 27 May 2022 16:00:27 GMT

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>

Re: Popover not showing up

LefterisKoumis — Fri, 27 May 2022 16:30:31 GMT

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

there should be a note that popover is depreciated.

Re: Popover not showing up

KittyHurley — Fri, 27 May 2022 16:37:00 GMT

@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.

Re: Popover not showing up

LefterisKoumis — Fri, 27 May 2022 16:59:40 GMT

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.

Re: Popover not showing up

KittyHurley — Fri, 03 Jun 2022 21:38:27 GMT

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.