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.

[OwenGeo]

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.

[OwenGeo]

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

[OwenGeo]

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 

[OwenGeo]

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!

[OwenGeo]

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