I have problem in print screen

XerK

My problem is when I click on the print button it gives me what I prepend it display block but when I close the print and open it again it clear everything in prepend.

The print button

{
                            extend: 'print',
                            text: '<i class="fa fa-print" aria-hidden="true"></i> طباعة',
                            html: '<i></i>',
                            exportOptions: {
                                columns: ':visible'
                            },
                            customize: function (win) {
                                    $(win.document.body)
                                    .css('font-size', '11px')
                                $(win.document.body).find('div').first()
                                    .prepend( $( ".content-header" ).css('display', 'block') )

                                $(win.document.body).find('div').last()
                                    .prepend( $( ".content-footer" ).css('display', 'block') )

                                $(win.document.body).find('h1')
                                    .css('display', 'none')
                                $(win.document.body).find('th')
                                    .addClass('compact')
                                    .css('text-align', 'right')
                                $(win.document.body).find('td')
                                    .addClass('compact')
                                    .css('text-align', 'right')
                                $(win.document.body).find('table')
                                    .addClass('compact')
                                    .css('direction', 'rtl')

                            }
                        },

HTML what I want to display

<div class="row">
                        <div class="col-sm-4 pull-left">
                            <img src="https://kamel-ouda.com/images/logo/PNG-24.png" alt="Logo" style="width:100px" class='img-responsive' />
                        </div>
                        <div class="col-sm-4 text-center">
                            <h3>{{user.class_room.name}} من {{user.class_edu.name}} عام {{ new Date() | moment("YYYY") }}/{{ new Date() | moment("add", "1 year","YYYY") }} م</h3>
                        </div>
                        <div class='col-sm-4' style="font-size: 18px">
                            <ul class="list-unstyled text-center pull-right">
                                <li>Some thing</li>
                                <li>Some thing</li>
                                <li>Some thing</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="content-footer" style="display:none">
                    <div class="row">
                        <div class="col-sm-4 text-center" style="font-size: 18px">
                            <ul class="list-unstyled">
                                <li>Some thing</li>
                                <li>Some thing</li>
                            </ul>
                        </div>
                        <div class="col-sm-4 text-center">
                        </div>
                        <div class='col-sm-4 text-center' style="font-size: 18px">
                            <ul class="list-unstyled">
                                <li>Some thing</li>
                                <li>Some thing</li>
                            </ul>
                        </div>
                    </div>
                </div>

And when I insert the @meida print in my style it not display it in my print.

@media print {
    .content-header {
        display: block !important
    }
}

colin

Hi @XerK ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin