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

How to Alter Map Series Active Accordion Content Height

mpboyle

I've downloaded the Map Series template from GitHub and am wondering if it's possible to create a custom CSS rule that would increase the height of the active accordion content window? I'd like to be able to display more text than what is currently visible.

accordion-height

Najděte více příspěvků označených jako

Accepted answers

All comments

oevans_storymaps

Hi Matt -- The accordion section panel's max height is set by line 197 in the AccordionPanel.js file.

You can adjust the portion of the panel that is dedicated to showing the active content. Currently it's set at 1/3 of the total panel height. Changing the 3 to 2, 1.5, or even 1.25 will allocate more space to the active section content and less space to the inactive section titles.

We have been considering changing this and will likely increase the amount of space devoted to the active section content in the next release (early Dec).

mpboyle

I thought this line of code has something to do with the spacing. Although, I'm looking in the 'viewer-min.js' file which I'm assuming is the minified viewer Javascript file. If I un-minify the file, I see this section of code:

I don't see any file named 'AccordionPanel.js'. If I change the value from 3 to 1.25 as shown above, I don't notice any change.

oevans_storymaps

Matt -- you'll need to download the full source code for the app and then compile your customized code to make this change. Check out this article which describes the process.

mpboyle

Ok...I downloaded the source code, made the change to the '.accordion-content max-height' property, and try running grunt from the folder location and get the error that it's not a recognized command...

oevans_storymaps

Matt -- You'll need to make sure you take a look at and read the instructions in the developer guide of the readme, in particular the environment setup section. Sounds like you haven't installed or initialized Node.

mpboyle

Owen,

Installed node.js, ran the npm commands, ran the grunt command ... still not seeing the accordion panel height adjustment after changing the line of code in the accordionPanel.js file from 3 to 1.25.

Test app: https://gis.linncounty.org/webapps/gis/training/arcmap/01-introduction-test/

Test app viewer-min.js file: https://gis.linncounty.org/webapps/gis/training/arcmap/01-introduction-test/app/viewer-min.js

oevans_storymaps

Hi Matt -- Sorry, that calculation is nested inside an if statement that only kicks in when you have more sections in your story. You can see more room devoted to the active section content on your app if you make your browser window shorter than about 750px.

If you want this to also work at taller browser window heights then just increase the number in line 194 from 120 to something like 500 or 1000.

mpboyle

Thanks, that's the combination I was looking for. Sorry to keep going back and forth!

oevans_storymaps

No worries -- I'm glad we were able to get it working like you wanted.

Připojte se ke konverzaci

Přihlášení členové mohou přispívat, sledovat aktualizace a další. Jste tu noví? Zaregistrujte si bezplatný účet.

Rychlé odkazy

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