topic Re: Zone Lookup: Custom CSS for Exporting PDF in ArcGIS Instant Apps Questions

Zone Lookup: Custom CSS for Exporting PDF

MLG-GIS — Thu, 02 Oct 2025 17:59:21 GMT

I would love to find a way to customize the export result on my Zone Lookup Instant App (unfortunately not a public app). Right now when I export, it shows the map and then on the second page it shows the Layer Pop-up Details, followed by the Layer Name.

Can this be reorganized using CSS?

Ideally I would have the results populate in 2 columns to save space, but my main concern is the content preceding the titles.

Thank you!

Re: Zone Lookup: Custom CSS for Exporting PDF

MLG-GIS — Thu, 02 Oct 2025 18:00:53 GMT

Example of print out:

Re: Zone Lookup: Custom CSS for Exporting PDF

JessicaJackson — Thu, 02 Jul 2026 21:27:02 GMT

Hi @MLG-GIS

I would also love a way to style the placement of the map and legend and have some more control over the header.

For your case though, the export is pretty much just a screenshot of the results, so you could style your popup into a table.

Re: Zone Lookup: Custom CSS for Exporting PDF

KellyHutchins — Thu, 02 Jul 2026 23:46:51 GMT

@MLG-GIS yes its possible - but it can be tricky. Can you show me what your popup looks like in the ArcGIS Online Map Viewer so I can understand the issue where the content precedes the titles? That part may be a bug.

We do want to add additional support for layouts in the export but we do not have a time frame for when this capability will be available.

Re: Zone Lookup: Custom CSS for Exporting PDF

KellyHutchins — Thu, 02 Jul 2026 23:46:15 GMT

Here's an example of side by side results. Note this probably needs some cleanup but is an example of styling the output.

@media print { .instant-apps-export-print.instant-apps-export-print__pdf { display: grid !important; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr) !important; gap: 16px !important; align-items: start !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; } .instant-apps-export-print__view-container { grid-column: 1 !important; grid-row: 1 !important; height: auto !important; overflow: visible !important; } .instant-apps-export-print__legend-container { grid-column: 2 !important; grid-row: 1 !important; margin: 0 !important; max-height: none !important; overflow: visible !important; } .instant-apps-export-print__content-container { grid-column: 1 / -1 !important; grid-row: 2 !important; display: block !important; /* Start results on page after map */ break-before: page !important; page-break-before: always !important; overflow: visible !important; max-height: none !important; } #printPopupInfo { column-count: 2 !important; column-gap: 18px !important; column-fill: auto !important; } /* Keep heading with the next result card */ #printPopupInfo > h2 { margin: 0 0 6px 0 !important; break-after: avoid-column !important; page-break-after: avoid !important; -webkit-column-break-after: avoid !important; } #printPopupInfo > h2 + .popup-content { break-before: avoid-column !important; page-break-before: avoid !important; -webkit-column-break-before: avoid !important; } /* Cards */ #printPopupInfo > .popup-content { display: inline-block !important; vertical-align: top !important; width: 100% !important; max-width: 100% !important; margin: 0 0 12px 0 !important; /* Allow pagination so all results print */ break-inside: auto !important; page-break-inside: auto !important; -webkit-column-break-inside: auto !important; } /* Prevent wide table cells from blowing up the column width */ #printPopupInfo .esri-widget__table { width: 100% !important; table-layout: fixed !important; } #printPopupInfo th, #printPopupInfo td { white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } #printPopupInfo .esri-feature, #printPopupInfo .esri-feature__size-container, #printPopupInfo .esri-feature__main-container, #printPopupInfo .esri-feature__content-node, #printPopupInfo .esri-feature__content-element { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } }