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 >

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

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

nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Calcite Maps: Accordion not working

Anonymous User

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.

<SPAN class="selector token">.areaInfo-accordion</SPAN> <SPAN class="punctuation token">{</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">margin-top</SPAN><SPAN class="punctuation token">:</SPAN> 80px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">margin-left</SPAN><SPAN class="punctuation token">:</SPAN> 200px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">height</SPAN><SPAN class="punctuation token">:</SPAN> 700px<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">width</SPAN><SPAN class="punctuation token">:</SPAN> 27%<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">overflow</SPAN><SPAN class="punctuation token">:</SPAN> auto<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">display</SPAN><SPAN class="punctuation token">:</SPAN> none<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">float</SPAN><SPAN class="punctuation token">:</SPAN> left<SPAN class="punctuation token">;</SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="property token">z-index</SPAN><SPAN class="punctuation token">:</SPAN> 2<SPAN class="punctuation token">;</SPAN>
<SPAN class="punctuation token">}</SPAN>‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

<SPAN class="operator token"><</SPAN>div id<SPAN class="operator token">=</SPAN><SPAN class="string token">"areaInfoA"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"areaInfo-accordion"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>aside <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"js-accordion accordion"</SPAN><SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-section is-active"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>h4 <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-title"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-icon"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>svg xmlns<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" target="_blank">http://www.w3.org/2000/svg</A><SPAN>"</SPAN></SPAN> width<SPAN class="operator token">=</SPAN><SPAN class="string token">"14"</SPAN> height<SPAN class="operator token">=</SPAN><SPAN class="string token">"14"</SPAN> viewBox<SPAN class="operator token">=</SPAN><SPAN class="string token">"0 0 32 32"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"svg-icon"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>path d<SPAN class="operator token">=</SPAN><SPAN class="string token">"M28 9v5L16 26 4 14V9l12 12L28 9z"</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>svg<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Title <SPAN class="keyword token">of</SPAN> Section
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>h4<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-content"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>p<SPAN class="operator token">></SPAN>Stuff<SPAN class="operator token">!</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>p<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-section"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>h4 <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-title"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-icon"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>svg xmlns<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" target="_blank">http://www.w3.org/2000/svg</A><SPAN>"</SPAN></SPAN> width<SPAN class="operator token">=</SPAN><SPAN class="string token">"14"</SPAN> height<SPAN class="operator token">=</SPAN><SPAN class="string token">"14"</SPAN> viewBox<SPAN class="operator token">=</SPAN><SPAN class="string token">"0 0 32 32"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"svg-icon"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>path d<SPAN class="operator token">=</SPAN><SPAN class="string token">"M28 9v5L16 26 4 14V9l12 12L28 9z"</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>svg<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Title <SPAN class="keyword token">of</SPAN> Second Section
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>h4<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-content"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>p<SPAN class="operator token">></SPAN>Stuff<SPAN class="operator token">!</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>p<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-section"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>h4 <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-title"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>span <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-icon"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>svg xmlns<SPAN class="operator token">=</SPAN><SPAN class="string token"><SPAN>"</SPAN><A class="jive-link-external-small" href="https://community.esri.com/external-link.jspa?url=http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" target="_blank">http://www.w3.org/2000/svg</A><SPAN>"</SPAN></SPAN> width<SPAN class="operator token">=</SPAN><SPAN class="string token">"14"</SPAN> height<SPAN class="operator token">=</SPAN><SPAN class="string token">"14"</SPAN> viewBox<SPAN class="operator token">=</SPAN><SPAN class="string token">"0 0 32 32"</SPAN> <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"svg-icon"</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN>path d<SPAN class="operator token">=</SPAN><SPAN class="string token">"M28 9v5L16 26 4 14V9l12 12L28 9z"</SPAN><SPAN class="operator token">/</SPAN><SPAN class="operator token">></SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>svg<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>span<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Title <SPAN class="keyword token">of</SPAN> Third Section
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>h4<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>div <SPAN class="keyword token">class</SPAN><SPAN class="operator token">=</SPAN><SPAN class="string token">"accordion-content"</SPAN><SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN>p<SPAN class="operator token">></SPAN>Stuff<SPAN class="operator token">!</SPAN><SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>p<SPAN class="operator token">></SPAN>
&nbsp;&nbsp;&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
&nbsp; <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>aside<SPAN class="operator token">></SPAN>
<SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>div<SPAN class="operator token">></SPAN>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍<SPAN class="line-numbers-rows"><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Vind meer berichten getagd met

Accepted answers

All comments

MichaelSnook

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

kenbuja

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.

rhughes522

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?

MichaelSnook

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

rhughes522

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

AllanLaframboise

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.

Anonymous User

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

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.