L.control.browserPrint - Custom print

[EricCronje]

Thanks for the plug in. We have a map with circles drawn on it. When selecting a map with alot (+_900) of circles and the map scaled to center. Then we also want a summary table or custom content to show on the bottom. When selecting the custom option - to print. then the image and table is not filling the whole page (A4) portrait.

Screen shot below (With alot of circles)

Should look like this:

Expected behavior The idea is that it fills the page. All must fit on one page.

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version [e.g. 22]

Using leaflet version: 1.4.0 And referencing: leaflet.browser.print

Code:

        L.control.browserPrint({
            title: thisBlock.name,
            printModes: ["Custom"]
        }).addTo(map)

And then marked the summary table:

...Content

[Igor-Vladyka]

Hi.

You would need to style content something like

        .grid-print-container { // grid holder that holds all content (map and any other content)
        grid-template: 1fr auto / 1fr;
    }
    .grid-map-print { // map container itself
        grid-row: 1;
    }
    .table{
        grid-row: 2;
    }

Please check Printing additional content section for more details and let me know. If it still not working, please specify more details and/or create a demo version to debug it properly.

Regards, Igor

[Igor-Vladyka]

@EricCronje Have you managed to achive what you where looking for?

[smyli323]

Hi @Igor-Vladyka,

I am having a similar problem with the plug-in. When I try to print in portrait mode, the map just doesn't fill the page. I've compared the css & html from one of your examples with my angular application and everything looks the same as far as I can tell. I have tried adding the css as you suggested above for .grid-print-container & .grid-map-print but no luck. Any help would be greatly appreciated!

[smyli323]

I sorted it out after all.

In case anyone runs into a similar issue, turns out there's a min-width set on that somehow messed it up.