Modal Print Full Size

[Interior_Clue]

I am trying to print the modal content in a full size but is not working and it shrinks the size

<div class="wrap">

    <h1>Bootstrap Modal Example</h1>

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#MyModal">

        Large modal

    </button>

</div>

<div id="printThis">

    <div id="MyModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">

        <div class="modal-dialog modal-lg">

            <!-- Modal Content: begins -->

            <div class="modal-content">

                <!-- Modal Header -->

                <div class="modal-header">

                    <h4 class="modal-title" id="gridSystemModalLabel">Your Headings</h4><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                </div>

                <!-- Modal Body -->

                <div class="modal-body">

                    <div class="body-message">

                        <h4>Any Heading</h4>

                        <p>And a paragraph with a full sentence or something else...</p>

                    </div>

                </div>

                <!-- Modal Footer -->

                <div class="modal-footer">

                    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

                    <button id="btnPrint" type="button" class="btn btn-default">Print</button>

                </div>

                <script type="text/javascript">

                    document.getElementById("btnPrint").onclick = function () {

                                    printElement(document.getElementById("printThis"));

                                };

                                function printElement(elem) {

                                    var domClone = elem.cloneNode(true);

                                    

                                    var $printSection = document.getElementById("printSection");

                                    

                                    if (!$printSection) {

                                        var $printSection = document.createElement("div");

                                        $printSection.id = "printSection";

                                        document.body.appendChild($printSection);

                                    }

                                    

                                    $printSection.innerHTML = "";

                                    $printSection.appendChild(domClone);

                                    window.print();

                                }

                </script>

                <style>

                    @media screen {

                        #printSection {

                            display: none;

                        }

                    }

                    @media print {

                        body * {

                            visibility: hidden;

                        }

                        #printSection,

                        #printSection * {

                            visibility: visible;

                        }

                        #printSection {

                            position: absolute;

                            left: 0;

                            top: 0;

                        }

                    }

                </style>

            </div>

        </div>

        <!-- Modal Content: ends -->

    </div>

</div>

Thank you for any help

[Interior_Clue]

I tired everything including what I found in this community but no luck. I would appreciated if someone can let me know if there is a code we need to use in order the Modal data or content shows completely in print screen and be able to print normal size.

Thank you

[patrick]

Perhaps in your print css making the modal a width of 100% will help.

@media print {
  .modal-dialog {
    max-width: 100%;
    width: 100%;
  }
}

[Interior_Clue]

Hi Patrick,

THANK YOU for that code.

Now that print width resolved. the main problem that I am having in modal is that I am showing dynamic table in the modal and there are two issues I am facing.

The print page end up having TWO pages. But the problem is there is no PAGE BREAK between pages and on second page it shows duplicate page of first page.

Thank you

[Interior_Clue]

These are images of first page and second page

Second page

Thank you

[UKRiggers]

It’s a bit late and shouldn’t really be answering questions when tired but I believe you need to turn off the scrolling of the modal within the @media print css.

[brad]

There is actually a setting in the modal properties for this.

[UKRiggers]

Hi Brad, you’re right with what you say but @Interior_Clue probably needs it to scroll on the browser page but not scroll when printing (@media print).

[Interior_Clue]

Hi everyone,

The scrolling is off already. and data in modal browser is scrolling and there is no problem.

The main problem is when the print windows opened to print the page. The line break is not working, and it is cutting the page on first page and since it is going to be two page it does duplicate the same page on the second page.

There is Print problem from Modal page for 2 or more pages. somehow it is not recognizing.

Thank you,

[Interior_Clue]

Hi everyone,

Do you guys think this might be a bug needs to be fix or there is something I am missing?
I am struggling with this situation for a week now.

Thank you,

[Teodor]

@Interior_Clue
This is in no way related to Wappler or a bug.
This is related to how the Bootstrap 4 modals are styled. You probably want to research more in google on the “printing Bootstrap 4 modal” topic.

[TomD]

I wouldn’t have thought the printing problems are due to a bug in Wappler, or in Bootstrap. Generally, printing from webpages can be rather a challenge.

I expect there are countless articles on the subject, but I think this one is good (although not very recent), and here’s another.

Of course you may already be familiar with the relevant CSS styles and using them, but I expect some of the options are not well known.

[Interior_Clue]

Hi Teodor,
I love Wappler since start using it.
I just wonder if there is a way of letting line-break work on repeated server action.

Thank you,

[patrick]

Try if it helps if you turn Scrollable on or off on the Modal.

Another thing you coult try is:

@media print {
  .modal-body {
    overflow: visible !important;
  }
}

[Marvoworks_IT]

put this before .modal-body div it will work