AGM Map printing shows gap in printout

Question

Printing my Angular AGM Map from chrome I get this large grey gap in the map:

As you can see, not only is the grey bar there (it turns white if I turn off "background graphics"), but it also shifts the map image below it down

Below is the simple code required to reproduce this issue:

app.component.ts:

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    template: `
        <button (click)="clickPrint()">print</button>
        <agm-map id="Gmap" [latitude]="34.051759" [longitude]="-118.244576" [zoom]="17"></agm-map>
        `,
    styles: [`
        agm-map {
            height: 800px; //height: 100%;
        }
        button {
            position: absolute;
            z-index: 10;
        }
    `]
})
export class AppComponent {
    clickPrint() {
        print()
    }
}

app.module.ts:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AgmCoreModule } from '@agm/core'

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AgmCoreModule.forRoot(/*{
            apiKey: 'YOUR_API_KEY'
    }*/),
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

styles.css:

html, body {
    margin: 0px;
    height: 100%;
    overflow: hidden;
}

Note: make sure you hit the Print button to see the issue

I have included a link to StackBlitz in case you want to tinker with my broken code: StackBlitz Link

Other information surrounding my problem:

• I'm not doing anything fancy with this demo, it is simply an Angular AGM Map, which I'm trying to print.
• If I change the zoom, or pan around, the size of the gap in the map when printing will fluctuate, but I'm hoping that some sort of css trick will help me to eliminate it completely. Thank you so much for your help!

Answer 1

Add display and width property to

    agm-map {
        height: 800px;
        width:800px;
        display:inline-flex;
    }

check this stackblitz

hope that's what you were looking for.