Bootstrap модальное отображение границы под контентом при печати - PullRequest
Новая
       21

Bootstrap модальное отображение границы под контентом при печати

0 голосов
/ 25 февраля 2019

У меня есть приложение Angular JS, которое я написал для системы POS.У меня есть модальное окно, которое всплывает для пользователя, чтобы распечатать квитанцию.Всплывающее окно и по тайм-ауту вызывается window.print.Весь контент, который я хочу напечатать из модального каталога, отображается, но по какой-то причине я вижу большую коробку с закругленными углами под моим контентом только при печати. ​​

Я не уверен, что можно найти лучший способ устранения неполадок.это окно, потому что я не вижу его ни в источнике, ни на экране.Я вижу это только в предварительном просмотре и на распечатанной странице.Любые идеи о том, как я могу проверить фактический HTML там?

печать CSS 

@media print {
  body * {
    visibility:hidden;
  }
  .printSection, .printSection * {
    visibility:visible;
  }
  .printSection {
    position:absolute;
    left:0;
    top:0;
  }
}

визуализированный HTML 

<div uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1040 + (index &amp;&amp; 1 || 0) + index*10}" uib-modal-backdrop="modal-backdrop" modal-animation="true" class="fade modal-backdrop in" style="z-index: 1040;"></div>
<div modal-render="true" tabindex="-1" role="dialog" class="modal fade ng-isolate-scope in" uib-modal-animation-class="fade" modal-in-class="in" ng-style="{'z-index': 1050 + index*10, display: 'block'}" uib-modal-window="modal-window" size="sm" index="0" animate="animate" modal-animation="true" data-vivaldi-spatnav-clickable="1" style="z-index: 1050; display: block;">
<div class="modal-dialog modal-sm" ng-class="size ? 'modal-' + size : ''"><div class="modal-content" uib-modal-transclude=""><table style="width: 3.125in; margin: 0.25in 0" id="receipt" class="printSection ng-scope">
<tbody>
<tr>
    <td colspan="4" class="center ng-binding">2/25/2019 12:27 pm</td>
</tr>
<tr>
    <td colspan="4" class="center ng-binding">Invoice #: 433</td>
</tr>
<tr>
    <td colspan="4">&nbsp;</td>
</tr>
<tr>
    <td colspan="4" class="center ng-binding"></td>
</tr>
<!-- ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Nerf</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'">
        25.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'" style="padding-right: 3px">
        25.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Standard Group</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'">
        105.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'" style="padding-right: 3px">
        105.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">10</td>
    <td class="ng-binding">Test 0</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Play</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Electric Boogaloo</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'">
        8.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' --><td class="right ng-binding ng-scope" ng-if="item.sourceTemplate !== 'PackageDetail'" style="padding-right: 3px">
        8.00
    </td><!-- end ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details --><tr ng-repeat="item in rcptCtrl.invoice.details" style="vertical-align: top" class="ng-scope">
    <td style="padding-right: 3px" class="right ng-binding">1</td>
    <td class="ng-binding">Test 0</td>
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
    <!-- ngIf: item.sourceTemplate !== 'PackageDetail' -->
</tr><!-- end ngRepeat: item in rcptCtrl.invoice.details -->
<tr>
    <td colspan="3" class="right">Sub Total:</td>
    <td class="right ng-binding">138.00</td>
</tr>
<!-- ngRepeat: tax in rcptCtrl.invoice.taxes --><tr ng-repeat="tax in rcptCtrl.invoice.taxes" class="ng-scope">
    <td colspan="3" class="right ng-binding">Sales Tax:</td>
    <td class="right ng-binding">11.47</td>
</tr><!-- end ngRepeat: tax in rcptCtrl.invoice.taxes -->
<tr>
    <td colspan="3" class="right">Total:</td>
    <td class="right ng-binding">149.47</td>
</tr>
<tr>
    <td colspan="4">&nbsp;</td>
</tr>
<!-- ngRepeat: payment in rcptCtrl.payments --><tr ng-repeat="payment in rcptCtrl.payments" class="ng-scope">
    <td colspan="3" class="right ng-binding">Cash:</td>
    <td class="right ng-binding">149.47</td>
</tr><!-- end ngRepeat: payment in rcptCtrl.payments -->
<tr>
    <td colspan="3" class="right">Total Payments:</td>
    <td class="right ng-binding">149.47</td>
</tr>
<tr>
    <td colspan="3" class="right">Change:</td>
    <td class="right ng-binding">0.00</td>
</tr>
<tr>
    <td colspan="4">&nbsp;</td>
</tr>
<tr>
    <td colspan="4" class="center">
        <span ng-bind-html="rcptCtrl.blurb | toTrusted" class="ng-binding"><div>Boo Yah!</div><div>&nbsp;</div><div>Boo Yah!&nbsp;</div></span>
    </td>
</tr>
</tbody></table></div></div>
</div>

1 Ответ

0 голосов
/ 26 февраля 2019

Вы можете использовать инструменты разработчика, чтобы настроить рендеринг устройства на определенные листы, а затем проверить dom для устранения проблемы.

...