Support » Plugin: Print-O-Matic » Issue when I want to print modal content

  • Resolved viccvanco

    (@viccvanco)


    Hi,

    When I want to print the content of a my modal, a new tab opens in my browser with the content, but I can do nothing. It is not the print dialog window that opens.

    For the test : go to “nos offres” section > click on “sélectionner” button, in the first modal click on “suivant” button, and in the second modal click on the print icon.

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 14 replies - 1 through 14 (of 14 total)
  • Plugin Contributor twinpictures

    (@twinpictures)

    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.

    Thread Starter viccvanco

    (@viccvanco)

    Thank you for your answer,

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

    Plugin Contributor twinpictures

    (@twinpictures)

    how exactly are you using the shortcode?

    Thread Starter viccvanco

    (@viccvanco)

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

    Plugin Contributor twinpictures

    (@twinpictures)

    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.

    Thread Starter viccvanco

    (@viccvanco)

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

    Plugin Contributor twinpictures

    (@twinpictures)

    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.

    Thread Starter viccvanco

    (@viccvanco)

    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.

    Plugin Contributor twinpictures

    (@twinpictures)

    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.

    Plugin Contributor twinpictures

    (@twinpictures)

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

    Thread Starter viccvanco

    (@viccvanco)

    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)

    Plugin Contributor twinpictures

    (@twinpictures)

    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!

    Thread Starter viccvanco

    (@viccvanco)

    I only added :

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

    And that solves my issue.

    Thank you 🙂

    • This reply was modified 1 year, 4 months ago by viccvanco.
    Plugin Contributor twinpictures

    (@twinpictures)

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

Viewing 14 replies - 1 through 14 (of 14 total)
  • The topic ‘Issue when I want to print modal content’ is closed to new replies.