Currently, I am in the process of developing a webpage utilizing angularjs and ui bootstrap to generate modals. However, as I attempt to print just the modal using javascript, I have encountered an issue with my CSS. It seems that due to potential formatting errors in my CSS, the text is overflowing outside the specified div containers. Particularly, the content related to ingredients and nutrition facts, contained within the "onerow" class div, is extending beneath the div tagged with the "modal-body" class.
If you would like to view the plunker for this project, here is the link: http://plnkr.co/edit/fxvD6MTvbEHsaonLR669?p=preview
In addition, when attempting to print only the modal pane using javascript, there arises an issue where the bold solid black borders present in the nutrition facts section are being transformed into borders with rounded corners for unknown reasons. For a clearer understanding of this problem, refer back to the plunker.
Displayed below is the HTML code representing the structure of the modal:
<div class="modal-header" id="modalHeader" style="text-align: center;">
<h3 class="modal-title">PLU# {{productData.PLU}} -- {{productData.Dept}}</h3>
</div>
... (Remaining HTML code for the modal)
</div>
<div class="modal-footer">
<button class="btn btn-success" type="button" ng-click="print()">Print</button>
<button class="btn btn-primary" type="button" ng-click="close()">Close</button>
</div>