I have been developing a custom AngularJS point-of-sale (POS) system that requires printing receipts upon completing a sale. To achieve this, I am using ng-print to print out a sales summary displayed within a specific div element after hiding all other unnecessary elements and showing only the relevant ones. However, I am facing an issue with formatting some rows in a line, as I am unable to add spacing between them or align them properly.
Below is an image showcasing the current layout of the sales summary, highlighting the spacing between Description, Price, and Quantity: https://i.stack.imgur.com/nbB9d.jpg
For better understanding, here is the HTML code snippet for the sales summary:
<div id="sales-summary">
<!-- Sales summary content goes here -->
</div>
The issue arises when trying to style the elements for proper alignment and spacing. Despite several attempts to adjust the CSS properties, I have not been successful in achieving the desired outcome. Below is the existing CSS code where I attempted to set up spacing:
@media print {
body * {
display:none;
}
/* Additional CSS styling goes here */
}
Unfortunately, despite my efforts, the printed output lacks proper spacing between the description, quantity, and price components, as shown in the following image: https://i.stack.imgur.com/dTf7A.jpg
If anyone has insights or suggestions on how to resolve this spacing and alignment issue in the printed receipt, your assistance would be highly appreciated.