topic Re: Calcite Maps: Accordion not working in ArcGIS JavaScript Maps SDK Questions

Calcite Maps: Accordion not working

Anonymous User — Sun, 12 Dec 2021 07:24:46 GMT

I am trying to use "accordion" using Calcite Maps bootstrap (jQuery version). I took a code from this link and used in my HTML file, but it didn't work for some reasons. I am not sure the problem is because of how I implemented the accordion code or something else. Either the case, are there any ways to make the accordion to work? I would very much appreciate your help.

Here is the video for the problem: calcite-maps-accordion and below is the code I used in the application.

.areaInfo-accordion {
    margin-top: 80px;
    margin-left: 200px;
    height: 700px;
    width: 27%;
    overflow: auto;
    display: none;
    float: left;
    z-index: 2;
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

<div id="areaInfoA" class="areaInfo-accordion">
    <aside class="js-accordion accordion">
  <div class="accordion-section is-active">
    <h4 class="accordion-title">
      <span class="accordion-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
      </span>
      Title of Section
    </h4>
    <div class="accordion-content">
      <p>Stuff!</p>
    </div>
  </div>
  <div class="accordion-section">
    <h4 class="accordion-title">
      <span class="accordion-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
      </span>
      Title of Second Section
    </h4>
    <div class="accordion-content">
      <p>Stuff!</p>
    </div>
  </div>
  <div class="accordion-section">
    <h4 class="accordion-title">
      <span class="accordion-icon">
        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 32 32" class="svg-icon"><path d="M28 9v5L16 26 4 14V9l12 12L28 9z"/></svg>
      </span>
      Title of Third Section
    </h4>
    <div class="accordion-content">
      <p>Stuff!</p>
    </div>
  </div>
</aside>
</div>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Calcite Maps: Accordion not working

Anonymous User — Tue, 25 Apr 2017 14:06:40 GMT

It turns out that using both Calcite Maps and Calcite Web CSS don't work well.

Re: Calcite Maps: Accordion not working

AllanLaframboise — Tue, 25 Apr 2017 20:17:46 GMT

Hi Makiko. You should be using just Calcite Maps (bootstrap) or Calcite Web, not both. They are both similar frameworks and offer much of the same functionality, but shouldn't be mixed. Let me know if I missed something.

Re: Calcite Maps: Accordion not working

RichardHughes2 — Thu, 06 Sep 2018 13:59:26 GMT

Hi Allan,

I am building an app using 4.8 and the Calcite-Maps library was used to create the initial layout and panels which work great. An issue I am having is that I need to create a tabbed UI in the popup to display a series of grids. I was unable to get the Calcite-Maps library to work within the Popup and then tried using DGrid. That was unsuccessful and overkill so I went to using the Calcite-web tabs which look great and offer an easy to use table. My only issue is that I cannot get the calcite.tabs to work in the Popup.

What would you recommend for creating a tabbed UI in the Popup in a 4.8 app?

Thanks,

Rich

Re: Calcite Maps: Accordion not working

MichaelSnook — Tue, 14 Apr 2020 15:10:49 GMT

Hi Richard

Have you found a solution to the tabs issue? I have a tabbed dialog/popup that works fine with <= 4.13 JSAPI but breaks at 4.14. If you have another solution you'd like to share that would be great!

Thanks
Mike

Re: Calcite Maps: Accordion not working

RichardHughes2 — Tue, 14 Apr 2020 15:23:34 GMT

Hi Michael,

I don't recall what solution I went with. Currently I am not working with the 4.x api and am trying to get clients to move in that direction. So I've actually taken some steps back and working in 3.x this year (ugh). Maybe next year I can help answer this?

Re: Calcite Maps: Accordion not working

KenBuja — Tue, 14 Apr 2020 16:12:37 GMT

Did you review the Breaking Changes section of the 4.14 Release Notes? If the popup contained HTML content, be aware of this:

The HTML sanitizer was added to all widgets to sanitize and escape strings according to the ArcGIS Online supported HTML specification. This can cause HTML set in PopupTemplate.content or in other widgets to be removed.

Re: Calcite Maps: Accordion not working

MichaelSnook — Tue, 14 Apr 2020 16:55:59 GMT

I did see that but as far as I can tell all of the generated HTML is being rendered into the popup as intended unless I'm missing something that is causing the tabs to fail...the tabs and all of the HTML seem to render fine also, I just can't select different tabs within the popup.

Mike

Re: Calcite Maps: Accordion not working

MichaelSnook — Wed, 15 Apr 2020 20:58:26 GMT

Scratch that...it's definitely scrubbing the html - harshly. Looking for a workaround. Thanks!

Re: Calcite Maps: Accordion not working

MichaelSnook — Thu, 16 Apr 2020 14:47:10 GMT

This ESRI blog post from last week (4/10/2020) did the trick...the workaround allows you to insert a DOM node into the popup/widget rather than directly adding HTML. The bootstrap tabs are working again!

Using HTML with Popups in the ArcGIS API for JavaScript