Calcite Maps: Accordion not working

855
9
04-24-2017 12:04 PM
MakikoShukunobe1
Occasional Contributor

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>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
Tags (2)
0 Kudos
9 Replies
MakikoShukunobe1
Occasional Contributor

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

0 Kudos
AllanLaframboise
Occasional Contributor III

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.

RichardHughes2
Occasional Contributor III

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

0 Kudos
MichaelSnook
Occasional Contributor III

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

0 Kudos
RichardHughes2
Occasional Contributor III

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?

0 Kudos
KenBuja
MVP Honored Contributor

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.

MichaelSnook
Occasional Contributor III

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

0 Kudos
MichaelSnook
Occasional Contributor III

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

0 Kudos
MichaelSnook
Occasional Contributor III

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 

0 Kudos