CODEWITHSUNDEEP
jqueryhtmlcsstwitter-bootstrap
chigs
chigs

Reputation: 194

Border color bootstrap @print not working

$("#print_btn_tm").click(function() {
            var link = '<link href=<?php echo base_url("../bootstrap/css/bootstrap.css") ?> rel="stylesheet" />';
            var divContents2 = link+$("#print1").html();
            var printWindow2 = window.open('', '', 'height=400,width=600');

            setTimeout(function (){
                printWindow2.document.write(divContents2);
            },1500);
            setTimeout(function (){
                printWindow2.print();
                printWindow2.close();
            },2000);
        });
.table thead tr td,.table tbody tr td{
        border-width: 1px;
        border-style: solid;
        border-color: black;
        font-size: 10px;
        padding:0px;
    }
    .scc{
        font-size: 10px;
        }
    @media print{
        .table thead tr td,.table tbody tr td{
            border-width: 1px;
            border-style: solid;
            border-color: black;
            font-size: 10px;
            background-color: red;
            padding:0px;
            -webkit-print-color-adjust:exact;
        }
    }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered" style="border-width: 1px;border-style: solid;border-color: black;">
    <tr>
        <td width='10%' style="padding:0px;">(a)</td>
        <td colspan='2' class="text-center" style="text-align:center;padding:0px;"> Particulars</td>
    </tr>
    <tr>
        <td style="padding:0px;"></td>
        <td style="padding:0px;" width="45%">ABC</td>
        <td style="padding:0px;" width="45%">DEF</td>
    </tr>
    <tr>
        <td style="padding:0px;"></td>
        <td style="padding:0px;">GHI</td>
        <td style="padding:0px;"><?php echo "M/S ".strtoupper("foo"); ?></td>
    </tr></table>

I am printing a php page based on bootstrap. The page can be seen perfectly in browser, but while I print it, the table border color is changed to default bootstrap color.

I tried many things, ideas even try to change bootsrtap.css itself but nothing worked. Can anybody show me the way?

Upvotes: 3

Views: 5660

Answers (3)

R.K.Bhardwaj
R.K.Bhardwaj

Reputation: 2192

you need to use colors properties not it like Black or red you can use the colors properties with !important CSS rule

$("#print_btn_tm").click(function() {
            var link = '<link href=<?php echo base_url("../bootstrap/css/bootstrap.css") ?> rel="stylesheet" />';
            var divContents2 = link+$("#print1").html();
            var printWindow2 = window.open('', '', 'height=400,width=600');

            setTimeout(function (){
                printWindow2.document.write(divContents2);
            },1500);
            setTimeout(function (){
                printWindow2.print();
                printWindow2.close();
            },2000);
        });
.table thead tr td,.table tbody tr td{
        border-width: 1px;
        border-style: solid;
        border-color: #DB4237 !important;
        font-size: 10px;
        padding:0px;
    }
    .scc{
        font-size: 10px;
        }
    @media print{
    .table thead tr td,.table tbody tr td{
        border-width: 1px !important;
        border-style: solid !important;
        border-color: #DB4237 !important;
        font-size: 10px !important;
        background-color: !important;
        padding:0px;
        -webkit-print-color-adjust:exact ;
    }
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-bordered" style="border-width: 1px;border-style: solid;border-color: black;">
    <tr>
        <td width='10%' style="padding:0px;">(a)</td>
        <td colspan='2' class="text-center" style="text-align:center;padding:0px;"> Particulars</td>
    </tr>
    <tr>
        <td style="padding:0px;"></td>
        <td style="padding:0px;" width="45%">ABC</td>
        <td style="padding:0px;" width="45%">DEF</td>
    </tr>
    <tr>
        <td style="padding:0px;"></td>
        <td style="padding:0px;">GHI</td>
        <td style="padding:0px;"><?php echo "M/S ".strtoupper("foo"); ?></td>
    </tr></table>

Upvotes: 1

Ankit Agarwal
Ankit Agarwal

Reputation: 30739

You need to use !important to override the css that has been already applied by bootstrap or other CSS files. Using !imporatant gives higher priority to the corresponding css property.

 @media print{
        .table thead tr td,.table tbody tr td{
            border-width: 1px !important;
            border-style: solid !important;
            border-color: black !important;
            font-size: 10px !important;
            background-color: red;
            padding:0px;
            -webkit-print-color-adjust:exact ;
        }
    }

Upvotes: 8

Ala Eddine Mrebai
Ala Eddine Mrebai

Reputation: 1

make sure to import your style.css after importing bootsrtap so that your css file can overwrite the bootstrap

Upvotes: 0

Related Questions