Print md-dialog content with scroll bar - css

Question

I have a long report made with md-list that is shown in a md-dialog, but when I try to print it, it only shows the section which i'm seeing on the screen no the entire length of the md-list. I have tryed this css tricks on #media:
#media print {
.grid-comissoes {
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
zoom: 0.8;
.grid-wrapper {
min-width: 0;
}
}
}
this is the part i'm trying to print:
<md-dialog-content class="md-dialog-content">
<div layout="row" layout-align="start center" layout-padding class="sd-mixed-row grey">
<span class="grey">Comissões a partir de</span>
<md-input-container flex="20" flex-xs="50" layout-no-padding>
<label>Início</label>
<input sd-datepicker="{changeMonth: false, changeYear: false}" ng-change="detalheCtrl.load()" aria-label="Início do período" ng-model="detalheCtrl.filter.startDh" ng-model-options="{debounce:300}">
</md-input-container>
<span class="grey">até</span>
<md-input-container flex="20" flex-xs="50" layout-no-padding>
<label>Fim</label>
<input sd-datepicker="{changeMonth: false, changeYear: false}" ng-change="detalheCtrl.load()" aria-label="Fim do período" ng-model="detalheCtrl.filter.endDh" ng-model-options="{debounce:300}">
</md-input-container>
</div>
<div layout="row" ng-if="detalheCtrl.loading" layout-align="center center">
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</div>
<div layout="column" ng-if="!detalheCtrl.loading">
<md-list layout-fill-width class="grey md-body-1 grid-comissoes" ng-repeat="regra in detalheCtrl.regrasComissoes">
<md-list-item layout="row" class="regra-header">
{{ detalheCtrl.getInfoRegra(regra) }}
</md-list-item>
<div class="grid-wrapper" ng-if="regra.tipoPagamento === 1">
<md-list-item layout="row">
<span>Finalizado em</span>
<span flex="20">Paciente</span>
<span flex>Tratamento</span>
<span>Valor do tratamento</span>
<span>Comissão</span>
</md-list-item>
<md-divider></md-divider>
<div ng-repeat="recebimentoTratamento in regra.recebimentosTratamentos">
<md-list-item layout="row">
<span>{{ recebimentoTratamento.tratamento.dataFinal | dateFormat }}</span>
<span flex="20">{{ recebimentoTratamento.tratamento.paciente.nome }}</span>
<span flex>{{ recebimentoTratamento.tratamento.procedimento.nome }} {{ recebimentoTratamento.tratamento.denteDTO.nome }}</span>
<span>
{{ recebimentoTratamento.tratamento.valor | currency }}
</span>
<span>{{ recebimentoTratamento.valorCalculadoComissao | currency }}</span>
</md-list-item>
<md-divider></md-divider>
</div>
<md-list-item layout="row" class="footer-grid">
<span></span>
<span flex="20"></span>
<span flex></span>
<span></span>
<span>Total</span>
<span>{{ regra.total | currency }}</span>
</md-list-item>
</div>
<div class="grid-wrapper" ng-if="regra.tipoPagamento === 2">
<md-list-item layout="row">
<span>Pago em</span>
<span flex="20">Paciente</span>
<span flex>Tratamento</span>
<span flex="20">Valor Pago</span>
<span>Parcela</span>
<span>Comissão</span>
</md-list-item>
<md-divider></md-divider>
<div ng-repeat="recebimentoTratamento in regra.recebimentosTratamentos">
<md-list-item layout="row">
<span>{{ recebimentoTratamento.recebimento.dataPagamento | dateFormat }}</span>
<span flex="20">{{ recebimentoTratamento.tratamento.paciente.nome }}</span>
<span flex>{{ recebimentoTratamento.tratamento.procedimento.nome }} {{ recebimentoTratamento.tratamento.denteDTO.nome }}</span>
<div layout="row" flex="20">
<span ng-if="!detalheCtrl.showInfo(recebimentoTratamento)" flex>{{ recebimentoTratamento.valor | currency }}</span>
<span ng-if="detalheCtrl.showInfo(recebimentoTratamento)" flex>
{{ recebimentoTratamento.valor | currency }} de {{ recebimentoTratamento.recebimento.valor | currency }}
<md-icon style="fill: #2193D7 !important;" class="info-popover-comissao" md-svg-icon="info-full" ng-if="detalheCtrl.showInfo(recebimentoTratamento)">
<sd-popover class="popover-comissoes" event="hover" align="bottom center">
<div layout="column" class="md-body-1 grey">
<span>O paciente pagou a parcela {{ recebimentoTratamento.recebimento.parcela }}/{{recebimentoTratamento.recebimento.numeroDeParcelas}} de {{ recebimentoTratamento.recebimento.valor | currency }} para a clínica.</span>
<span layout-margin-top>A comissão da {{ detalheCtrl.profissional.nome }} será gerada apenas sobre o valor de {{ recebimentoTratamento.valor | currency }} correspondente ao tratamento {{ recebimentoTratamento.tratamento.procedimento.nome }}.</span>
<span layout-margin-top>O restante do recebimento é referente a tratamentos realizados por outros profissionais.</span>
</div>
</sd-popover>
</md-icon>
</span>
</div>
<span>{{ recebimentoTratamento.recebimento.parcela }}/{{recebimentoTratamento.recebimento.numeroDeParcelas}}</span>
<span>{{ recebimentoTratamento.valorCalculadoComissao | currency }}</span>
</md-list-item>
<md-divider></md-divider>
</div>
<md-list-item layout="row" class="footer-grid">
<span></span>
<span flex="20"></span>
<span flex></span>
<span></span>
<span>Total</span>
<span>{{ regra.total | currency }}</span>
</md-list-item>
</div>
</md-list>
<div layout="column" layout-align="center end" layout-margin-top>
<span layout-margin-top>Total a pagar {{ detalheCtrl.total | currency }}</span>
</div>
</div>
</md-dialog-content>

Answer 1

I think it's already reported in the angular repo
however you can get a simple workaround by setting up manually a descent height for your modal:
config: MdDialogConfig = {
disableClose: true,
width: '',
height: '600px',
position: {
top: '',
bottom: '',
left: '',
right: ''
}
};