2017-05-02 9 views
1

md-dialogで表示される長いレポートがありますが、印刷しようとすると表示されているセクションのみが表示されますmd-listの全長は表示されません。私は@mediaに、このCSSのトリックをしようと試みていますスクロールバーでmd-dialogコンテンツを印刷

@media print { 
     .grid-comissoes { 
      height: 100%; 
      width: 100%; 
      position: absolute; 
      overflow: hidden; 
      zoom: 0.8; 

      .grid-wrapper { 
       min-width: 0; 
      } 
     } 
    } 

これは私が印刷しようとしている部分である:

 <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> 

答えて

1

私はそれはすでに角度レポ

で報告されたと思うしかし、あなたは、あなたのモーダルの降下の高さを手作業で設定することで、簡単な回避策を得ることができます:

config: MdDialogConfig = { disableClose: true, width: '', height: '600px', position: { top: '', bottom: '', left: '', right: '' } };

関連する問題