I am currently working on an angular application that utilizes angular-pdf. The controller and view function perfectly, and the PDF is displayed correctly, except for one issue. The height of the PDF exceeds the min-height of the module, causing it to expand.
This expansion seems to affect the background color, turning it into the same color as the module's background. Typically, the background has a greyish hue, but with the height increase, the background color starts seeping into the body (note: I have no affiliation with the page shown in the image): https://i.stack.imgur.com/zpFqx.png
As visible in the screenshot, the background changes about 80% down the webpage.
To maintain a consistent background-color throughout, I have set the background-color in a stylesheet, referencing the body:
body {
background-color: #D2D5D3;
-webkit-font-smoothing: antialiased;
}
Aside from this, I do not specify any other background properties for the body. The only other background element is derived from md-content:
<div ng-controller="pdfpageController as vm">
<md-content id="pdfpage" layout-padding>
<md-toolbar>
<div class="md-toolbar-tools">
<md-button class="md-primary md-raised" ng-click="goback()">
<md-icon md-svg-icon="../resources/img/arrow_left.svg"></md-icon>
<span class="orange"><b>Back</b></span>
</md-button>
<h2 flex md-truncate class="text-center">Shifts</h2>
</div>
</md-toolbar>
<md-toolbar class="md-wan md-hue-2" style="border-top: 0.5px solid black">
<h1>{{pdfName}}</h1>
</md-toolbar>
<ng-pdf template-url="app/views/partials/viewer.html" scale="page-fit"></ng-pdf>
<canvas id="pdf-canvas"></canvas>d="test-canvas"></canvas>-->
<hr />
<div layout="row" layout-align="start center">
<div class="container">
<span><b>Signature:</b></span>
<signature-pad accept="accept" clear="clear" height="220" width="568" dataurl="dataurl"></signature-pad>
<div layout="row">
<md-button ng-model="signature" class="md-raised md-primary" ng-click="signature = accept()">Use signature</md-button>
<md-button ng-model="clearSig" class="md-warn md-raised md-hue-2" ng-click="clearSig = clear()">Clear signature</md-button>
</div>
</div>
</div>
<!--<iframe style="width: 400px; height: 400px;"></iframe>-->
</md-content>
</div>
If you have any suggestions on preventing the md-colors background from merging with the body's background, please share your insights!