Issue when I want to print modal content

We are aware of this issue. It has been addressed in the upcoming version 2.0 release. Please download it from GitHub and manually update to the Release Candidate and see if this resolves the problem out-of-the-box.

Thank you for your answer,

Now the print dialog window displays but it displays me a blank page…

how exactly are you using the shortcode?

I put the shorcode [print-me target=”#contentToPrint”] into my div#modalRecap, and I put an id=”contentToPrint” to my div.modal-content.

hihihi… very funny! ok, the issue is that it’s printing, but the size is soooo wide that you don’t see anything. You can see this if you adjust the printing scale down (alot)…
What you can try is to provide a fixed-width to the #contentToPrint just for printing. Here is an example:

@media print {
   #contentToPrint {
      max-width: 800px;
   }
}

Just add the above CSS to the theme’s quick-css setting, your child-theme’s style.css… or WordPress’ built in CSS customizer.

Do let us know if this resolves your issue.

It doesn’t work, I still have my blank page…

the css is not being implemented. Where did you place the code?

are you using a caching, js/css combine and minify plugin? If so, turn it off until the issue is resolved.

again, it’s not a blank page, it’s just the the element is so wide, the print content is way to the right… you can see this by zooming out, or changing the print-scale.

Which browser is being used, so we can verify with the same setup.

I use “Insert Headers and Footers” plugin to insert my css in the head of my page.

But I see well my css in the browser’s inspector, when I click on the “Enable / Disable media rules simulation for page printing” icon I see well the css rule for #contentToPrint element.

I don’t use a caching, js/css combine and minify plugin.

I test on Firefox Developer Edition 87.0b9 but I have the same issue on Chrome Version 89.0.4389.82.

then try and override the css for:

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 4rem;
    border: 1px solid #888;
    width: 100%;  <--- this one
}

for example:

.modal-content {
    width: 800px !important;
}

Normally you would only need to do this on the print css:

@media print {
   .modal-content {
      width: 800px !important;
   }
}

once it’s a css issue that you can control, you should be on the home stretch.

I just checked it and it seems to be working correctly now. Is this the case on your end as well?

I tested but I have to change the scale in the print dialog window to see the content, how can I see my content leaving the default settings? (Fit to page width)

ok, good, so now you see that the content is there, it’s just the @media print css that needs to be adjusted. This is a bit beyond the support we offer on our free plugin, but you might consider changing the position: absolute to relative for the .pum-container class:

.pum-container {
    top: 100px;
    position: absolute;  <---- hmmmm
    margin-bottom: 3em;
    z-index: 1999999999;
}

it’s going to be a bit of trial and error I am afraid, but you will get is solved!

We do offer a very high level of personal support with our pro version, so if you just want us to fix the css for you, you might consider going that route.

But I have every confidence that you’ll get it sorted out, regardless. Let us know how it goes!

I only added :

@media print {
	.pum-container {
		left: 0 !important;
	}
}

And that solves my issue.

Thank you ??

• This reply was modified 3 years, 8 months ago by viccvanco.

Huzzah! knew you could get it working!
Thanks for marking the issue as resolved.