Background color seeping into body when expanded on height

Question

I've got an angular application I'm working on right now that implements angular-pdf.

The controller and view work absolutely fine and the pdf is displayed just fine, with one problem. As the PDF is higher than the min-height of the module it expands the height of it.

This seems to make the background color into the color of the modules background. Usually the background is grey-ish, but as the height expands the module's background color seems to seep into the body (the page is a placeholder. I have no affiliation with them!):

As you can see the background is different about 80% down the webpage.

I'd like to have the same background-color all the way down.

As it stands now I set the background-color in a stylesheet and refer to body:

body {
    background-color: #D2D5D3;
    -webkit-font-smoothing: antialiased;
}

Other than that I do nothing with the body's background. The only other background I have is taken 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>

Does anyone have a suggestion on how I stop the md-colors background from seeping into the body's background?

try body{height:100%;}. here are more suggestions: https://stackoverflow.com/questions/34591106/setting-body-height-to-100 — tech2017, Jun 05 '17 at 14:31
have you set a height on your body? if so remove it or set a min-height — Pete, Jun 05 '17 at 14:33

score 0 · Answer 1 · answered Jun 05 '17 at 14:37

0

Try adding min-height: 100% to body, and also make sure the content of body is not position:absolute or fixed, try position:relative for body content so that the body adapts its size to the contents size

answered Jun 05 '17 at 14:37

godzsa

2,105
4
34
56

score 0 · Answer 2 · answered Jun 05 '17 at 14:40

0

Try the following:

html,body {
height: 100%;
}

#pdfpage {
height: auto !important;
min-height: 100%;
}

I'm assuming that #pdfpage is the container element of the PDF viewer in this case.

answered Jun 05 '17 at 14:40

rafarlp

11
1

Background color seeping into body when expanded on height

2 Answers2