Canvas expands containing module's height and changes bg-color of body when doing so.

Question

Canvas expands containing module's height and changes bg-color of body when doing so.

Todai88 opened this issue 7 years ago · comments

Joakim Bajoul Kakaei commented 7 years ago

Good morning,

I've been fiddling with this package to implement a pdf-viewer in a little kiosk application I'm developing.

However as it stands right now the pdf, when scaled to fit pushes the height of the containing module way out of bounds, which seems to make the default background-color of md-content to spill into the body's background.

You can find an example here on our website.

The code .html code for the module:

<div ng-controller="pdfpageController as vm">
    <md-content id="pdfpage" layout-fill>
        <md-toolbar>
            <div class="md-toolbar-tools">
                <md-button class="md-primary md-raised" ng-click="goback()">
                    <md-icon md-svg-icon="/kiosk/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-warn md-hue-2" style="border-top: 0.5px solid black">
            <h1 class="text-center">{{pdfName}}</h1>
        </md-toolbar>  

            <ng-pdf template-url="/kiosk/app/views/partials/viewer.html" scale='page-fit'></ng-pdf>
            <canvas id="pdf-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>   
    </md-content>
</div>

index.html (the entry point):

<body>
    <div id="main-div" class="flex">
        <div class="flex header">
            <img id="header-img-left" src="/kiosk/resources/img/WSC.png" />
            <img id="header-img-right" src="/kiosk/resources/img/StobartRail.png" />
        </div>
        <!-- body -->
        <div ng-app="kioskApp" id="questions-div">
            <div ng-view></div ng-view>
        </div>
    </div>
</body>

And finally my CSS:

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

.flex {
    display: flex;
}

.container-center { 
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
}

.card-media md-icon {
    width: 70px;
    height: 70px;
    color: rgba(255, 255, 255, 0.87);
}

.card-media {
    margin-right: 10px;
    border-radius: 50%;
    overflow: hidden;
}

.colorsdemoBasicUsage .md-subhead.description {
    color: rgba(255, 255, 255, 0.7);
}

.flex-row {
    display: flex;
    flex-direction: row;
}

md-content {
    min-height: 550px;
    height: auto; 
    /*box-shadow: #D2D5D3 2px 2px;*/
    /*border-top: 1px solid #D2D5D3;
    border-left: 1px solid #D2D5D3;*/
}

#additional {
    box-shadow: none;
    border: none;
}

.boxshadow {
    padding: 8px;
}

.padding-left{
    margin-left: 10px;
}
#back-button {
    margin: 5px 0px 0px 5px;
}

#back-button span{
    padding-left: 10px;
}

.btn {
    border-radius: 0 !important;
}

.table tbody > tr > td.vert-align {
    vertical-align: middle;
}

.vertical-align {
    vertical-align: middle;
}

.orange {
    color: orange;
}

#main-div { 
    flex-direction: column;
    width: 80%;
    margin: 0 10%;
    box-shadow: 10px 10px 5px #888888;
}
.header {
    background: white;
    border-bottom: 1px solid #888888;
}

#header-img-left {
    margin-left: 1em;
    padding: 0;
    margin-right: auto;
}

#header-img-right {
    margin-right: 1em;
    padding: 0;
    justify-content: flex-end;
}


#questions-div {
    min-height: 550px;
    /*height: 100%;*/
    background: white;
}

.date-label {
    padding: 2px;
    background-color: beige;
    box-shadow: 2px 2px 1px #888888;
    width: 120px;
    display: inline-block;
}

.date-value {
    display: inline-block;
    width: 250px;
}

.center {
    align-items: center;
    height: 50px;
}


.wrapper {
    margin: auto;
}

date-picker {
    display: inline-block;
}

.show-hide {
    transition: all linear 0.3s;
}

.show-hide.ng-hide {
    opacity: 0;
}

/* signature */

.container { 
    padding: 10px 10px 40px 10px;
    position: relative;
    margin: 0 auto 0 auto;
    height: 100%;
}
    .container .signature canvas {
            border: 1px solid #999;
            margin: 0 auto;
            cursor: pointer;
    }

md-dialog-container {

}

md-dialog {
    bottom: 70% !important; 
    position: absolute !important;
    max-width: 90%;
    max-height: 90%;
}

.row-margin {
    margin-left: 50px;
}

I'd be extremely grateful if someone could give me some help here as I'm not really sure what this boils down to.

Denny Biasiolli · Answer 1 · Tue Jun 06 2017 17:45:07 GMT+0800 (China Standard Time)

Hi @Todai88,
I think it is a CSS problem, not related to the directive. It appears when the directive loads the content to an height greater than the height of the body.
Looking at your CSS, it seems that you have a height: 100%; in your body, inherited from angular-material.min.css.
Removing that, you can see the full background.