Map breaks into two pages in smaller screens

[promisethedeveloper]

Describe the bug I've encountered an issue in my Angular project using leaflet.browser.print where the map consistently splits across two pages during printing, despite not encountering this problem on larger screens. Please how can I resolve this.

To Reproduce

  onMapReady($event: L.Map) {
    this.map = $event;
    L.control
      .browserPrint({
        title: 'Print Map',
      })
      .addTo(this.map);

    this.map.on('browser-print-start', (e: any) => {
      const legend = this.createLegend();
      legend.addTo(e.printMap);
    });
  }

Expected behavior The map should be displayed on a single page during the print preview.

Screenshots

*

[Igor-Vladyka]

Hey.

What is your tarked page size for print in the browser and what page size you want to print from the plugin?

[promisethedeveloper]

  onMapReady($event: L.Map) {
    this.map = $event;

    // Define your custom print options
    const printOptions = {
      title: 'Custom Print Title', // The title for the printed page
      position: 'topright', // The position of the print control
      pageSize: 'A4', // Specify the page size (e.g., 'A4', 'Letter', or custom dimensions)
      printModes: ['Portrait', 'Landscape'], // Supported print modes
      closePopupsOnPrint: true, // Close popups before printing
      contentSelector: '.leaflet-container', // CSS selector for the content to be printed
    };

    L.control
      .browserPrint({
        // title: 'Print Map',
        printOptions,
      })
      .addTo(this.map);

    this.map.on('browser-print-start', (e: any) => {
      const legend = this.createLegend();
      legend.addTo(e.printMap);
    });
  }

I would like to set the page size for printing from the plugin to 'A4,' while maintaining the default page size for printing in the browser. It's worth noting that even when I use the custom cropping option to print a small section of the map, it consistently results in the content spanning across two pages on smaller computers.

[Igor-Vladyka]

The page size from the plugin is A4, which is bigger in dimentions then Letter(that you have in the browser). This may happen dues to browser taking default size from the system/printer in use/manual changes before. Try setuping letter as a pageSize in the plugin, or use A4 but change the paper size in the browser print screen and compare the results. Current JS code tries to enforce paper sie from the plugin into browser print logic via media css, but it's not always the case and works only from time to time.

[promisethedeveloper]

I setup the plugin to use letter as the PageSize, but when I tried to print from the browser, with a paper size of letter and A4, the content still ended up spanning two pages.

  onMapReady($event: L.Map) {
    this.map = $event;

    // Define your custom print options
    const printOptions = {
      title: 'Print Map', // The title for the printed page
      position: 'topright', // The position of the print control
      pageSize: 'Letter', // Specify the page size (e.g., 'A4', 'Letter', or custom dimensions)
      printModes: ['Portrait', 'Landscape'], // Supported print modes
      closePopupsOnPrint: true, // Close popups before printing
      contentSelector: '.leaflet-container', // CSS selector for the content to be printed
    };

    L.control.browserPrint({ printOptions }).addTo(this.map);

    this.map.on('browser-print-start', (e: any) => {
      const legend = this.createLegend();
      legend.addTo(e.printMap);
    });
  }

Browser print screen for Letter

Browser print screen for A4

[promisethedeveloper]

This problem continues to persist in my work. I would appreciate it if you could respond when you have the opportunity. Thank you.

[pierrealexaline]

I think you must try to print without header and footer there's an option for that.