CODEWITHSUNDEEP
htmlcssangularjs
Ranjeet singh
Ranjeet singh

Reputation: 794

How to apply css style when using ng-print inAngular JS

I have created PHP page using angular JS. Now, I want to print that page as well as. I have added ngPrint in my app.js and also assign id to the main div. on page preview data are showing perfectly but without css property. I also added ngPrint.css and ngPrint.js .

my code in header section :- 

<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="js/angular.min.js"></script>   
<script src="app/app.js"></script>
<!-- ng-print -->
<link rel="stylesheet" type="text/css" href="css/ngPrint.css">
<script src="js/ngPrint.js"></script>
<!--/ ng-print -->

on app.js :-

var mainApp = angular.module("IncomeBenefit", ['ngPrint']);

on display page:- 

    <div class="main" id="printSectionId" ng-app="IncomeBenefit">
    <h1 class="main_h1_calc">Calculator</h1>    
        <div class="col-main-w-12" ng-controller="displayController">
            <div class="col-main-w-5">
                <div class="form-header-main" ng-repeat="X in names">

                                    <!-- form section -->                           
                                    <div class="form-header">
                                        <div class="form-header-l">Client Age</div>     
                                        <div class="form-header-r">{{X.client_age}}</div>       
                                    </div>                              
                                    <!--/ form section -->      
                </div>
            </div>
<button class="btn btn-primary" ng-print print-element-id="printSectionId"><i class="fa fa-print"></i> Print</button>
                </div>
            </div>

I don't have any idea. How to add css property to my printable data. I have also tried inline css but can't succeeded . What can I do ?

Upvotes: 0

Views: 1787

Answers (1)

thepio
thepio

Reputation: 6253

In your style.cssfile try adding the following and see what happends:

@media print {
  body { border: 15px solid black; }
}

You have to use @media print to apply print styles and include evertyhing inside it but please remember that css support is somewhat limited when printing.

A good tutorial to get started with

Upvotes: 1

Related Questions