Print Link from Modal Dialog

Feature Requests
1

There definitely needs to be a feature for printing from the Modal Dialog next to the close as Modals are often used for displaying "report" type" inforamtion.


2

PS the css is just the stock CSS with the last line hiding h1.

3

For some reason Stevan's code didn't quite work, but this does it for me. (I'm a little nervous about setting the absolute position in case the window is resized, but I'm gonna use it.)

$(document).on("knack-view-render.view_296", function(event, view) {

$(“#kn-modal-bg-0”).find(“h1”).append(‘<span style=“position:absolute; right:80px; color:white; font-size:14px; font-weight: normal;text-decoration: underline;top: 0px;display: block;line-height: 44px;”>print</span>’);


});

Then you need this css:

@media print {

p a, p a:visited { color: #444 !important; text-decoration: underline; }

p a[href]:after { content: " (" attr(href) “)”; }

abbr[title]:after { content: " (" attr(title) “)”; }

.ir a:after, a[href^=“javascript:”]:after, a[href^=“#”]:after { content: “”; }

pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }

thead { display: table-header-group; }

tr, img { page-break-inside: avoid; }

@page { margin: 0.5cm; }

p, h2, h3 { orphans: 3; widows: 3; }

h2, h3{ page-break-after: avoid; }

h1 { display: none; }

}

4

Thanks! I was trying to shortcut it by applying the class from the regular print button. I suppose that just uses a print CSS from the main window that could be modified for the modal window?

5

Hi,

You can try this:

$(document).on("knack-view-render.view_296", function(event, view) {
  var test = '<span style="
    position:absolute; 
    right:80px; 
    color:white; 
    font-size:14px; 
    font-weight: normal;
    text-decoration: underline;
    top: 0px;
    display: block;
    line-height: 44px;">
  print
  </span>';
$("#kn-modal-bg-0").find("h1").append(test);
$(test).click(function() {
    window.print(); 
});
});

However be careful as launching window print on modal will print all the page including what's behind the modal pop up. To overcome this you have to do define media print in CSS

6

I've managed to format a print button with this code:

$(document).on("knack-view-render.view_296", function(event, view) {

var test = $("#kn-modal-bg-0").find(“h1”).append(’<span style="

position:absolute;

right:80px;

color:white;

font-size:14px;

font-weight: normal;

text-decoration: underline;

top: 0px;

display: block;

line-height: 44px;">

print

</span>’);

});

However, I can’t seem to get it to work. I’ve tried applying class=“kn-print”, but that doesn’t do anything. Hoping someone can add the missing piece, here.

Thanks!