Where is the print button on wappler

I have a modal that i want to add a print button to print only the contents of the modal. How do it do that?

Hi Paul, please see the following post:

thanks dave. where is the print button located in wappler?

There is no print button as such. You have to create this functionality. It is discussed in the post I have linked to above.

can you please do a step by step on how to go about it? i am very new and dont understand most of what you put iin the post.

Create a file called style.css and put it inside a directory named css within your web root. Add the following to the style.css file:

CSS:

@media print {
    /* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */
    body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible; /* make visible modal body and header */
    }
}

Using the Design Panel specify this file as the Project Style File:

And attach the file to the page as explained above.

In your modal add the following replacing the existing Modal Footer (or you can just copy and paste the Button).

Modal Footer:

<div class="modal-footer">
    <button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>
</div>

Or just the button:

Button only:

    <button type="button" class="btn btn-default" onclick="js:window.print()">print modal content</button>

That should then allow you to print the contents of the Modal.

:slight_smile:

1 Like

thanks so much dave.
done. what next

No worries. Have edited the post above to conclude the method discussed in the other post.

:wink:

Quick note:

Remember some browsers will cache .css files! Some times changes may not be reflected immediately if the old cache is being loaded. Clear your browser history and cache and this should allow for the new file to be served to the browser. In other situations the server itself may be caching files for a certain period of time. If this is the case just rename the style file and its corresponding links accordingly and then this new file will be requested by the browser. :wink:

dave it worked. hurray. am so happy. i sat on this the whole day. thanks so much

1 Like

You’re welcome. Now on to the next thing you need to do. Good luck with your Project.

:slight_smile:

Question, how would you make it to where the modal prints full width?

I have the print function setup as described in the article, but the modal is printing centered and squeezed together.

I spent an hour googling for an answer and tried numerous solutions with no success. :frowning:

Hi Scott,
You will need to use @media print media query for your print style. Add it in your css file and inside it you will need to style the modal as you need them to appear when printed.

@media print { 
 /* All your print styles go here */
}

You will probably want to set display:none for all other elements as well. Experiment with the browser dev tools to make the modal as you need it to appear when printed and copy the styles to the print media query.

1 Like

This is what I am seeing when I click on my print button. (sensitive portions blocked out)

The css file in use has the following code:

/* CSS CODE TO ALLOW PRINTING OF MODAL CONTENT */
@media print and (min-width:7in) and (max-height: 11in) {
    /* on modal open bootstrap adds class "modal-open" to body, so you can handle that case and hide body */
    body.modal-open {
        visibility: hidden;
    }

    body.modal-open .modal .modal-header,
    body.modal-open .modal .modal-body {
        visibility: visible; /* make visible modal body and header */
        width: 100%!important; 
    }
}

The issue is making the modal body full width and not squeezed as shown in the image.

When I look in the browser dev tools > CSS Emulator > Print, it shows:

So isn’t what you see on the printed version the same you show on the second screenshot?

No, the printed version is what is shown on the first screenshot.

A print action has been added to the browser component. You can call it using the dynamic events.

1 Like