Zone Lookup: Custom CSS for Exporting PDF

[MLG-GIS]

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!

[MLG-GIS]

Example of print out:

[JessicaJackson]

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. 

[KellyHutchins]

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

[KellyHutchins]

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