Possible alignment problem when converting Angular ng-repeat to PDF or printer using CSS

While working on generating tickets for printing using AngularJS, I noticed that there is an offset of approximately 5 pixels between the first and last ticket out of the 1000 tickets I tried to create. As I was tinkering with my code, the output appeared inconsistent due to what I suspect might be the way the borders are handled, but I can't say for certain.

At the beginning of the ng-repeat process, both the classes ticketNo and ticketNoR seem to extend beyond the bottom border of their relative parent (ng-repeated) by about 2 pixels.

Upon reaching the 1000 tickets mark, these two classes now hover about 2 pixels above the bottom border of their parent element.

The discrepancy in results varies between Chromium and Firefox browsers, but the offset always remains. I am struggling to identify its source.

I posted my code here, and it seems that the fiddle does not replicate the issue accurately. How can I eliminate this offset for seamless printing and auto-cutting?

Any insights on where the problem might lie?

...

htmlcssangularjsprinting

Answer №1

The problem stems from the use of css-border. One solution is to utilize @media print and experiment with adjusting the border thickness.

I encountered a similar issue while creating a barcode. The bottom border consistently covered part of the barcode when printed from Chrome or Firefox, but it displayed correctly in Internet Explorer for some unknown reason. Perhaps you could test it on IE and see if it resolves the issue for you as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guidance on initiating an Ajax script automatically when an HTML page is loaded

Is there a way to execute myfile.php first in myfile.html upon loading using an ajax script without the use of include and require functions? If so, how can this be done? ...

phphtmlajax

How to create a calendar selection input using PHP?

Before I start writing the code myself, I am searching to see if there is already a solution available or if someone has previously outsourced the code. Below is an example of my date selection: https://i.sstatic.net/KqIDH.png I want to create a feature ...

javascriptphpjqueryhtmldate

Flask and jQuery combine forces to make a dynamically generated HTML table vanish in an instant

I am currently utilizing Flask (Flask API link) to develop a basic website that takes an 'order_id' and interacts with a MySQL database (MYSQL - Python API link) in the backend to display the associated items for that order_id in a table. While ...

jqueryhtmlajax

Masonry layout organizes images in a vertical stack, with one image per row

After implementing Masonry on my website, I encountered an issue where all the images stack vertically in a single row once the page loads. Instead, I would like them to stack both horizontally and vertically. You can view the problem on My Jsfiddle. This ...

javascriptcsstwitter-bootstrapjquery-masonrymasonry

Customize Material-Table: Adjusting Detail Panel Icon Rotation upon Row Expansion

I've made a modification to the layout of the detail panel icon (mui ChevronLeft) so that it now appears on the right side of the table by using the options={{detailPanelColumnAlignment: "right"}} property. TableIcons : DetailPanel: for ...

cssreactjsmaterial-uimaterial-table

What is the best way to delete the twbs directory from my Laravel project?

I am struggling to incorporate twbs into my Laravel project. How can I remove this folder? https://i.sstatic.net/vaITB.jpg composer.json { "name": "laravel/laravel", "description": "The Laravel Framework.", "keywords": ["framework", "laravel ...

csstwitter-bootstraplaravellaravel-5.4twitter-bootstrap-4

Converting Data from MySQL and PHP to Excel

Is there a way to export human resource applications stored in my MySQL table as an Excel file? function exportExcel($filename='ExportExcel',$columns=array(),$data=array(),$replaceDotCol=array()){ global $connect; header('Content-Enc ...

phphtmlmysqlhtml-tableexport-to-excel

Button interface in Angular

I am facing an issue with a div containing several buttons. Currently, they appear in a single column as illustrated in the image. I want to display them in rows, with 20 buttons per row out of the total 1000 buttons. How can I achieve this layout in Angul ...

htmlangular

Creating a hover effect for displaying image masks

My website features a profile page displaying the user's photo. I am attempting to create a functionality where when the user hovers over their photo, a transparent mask with text appears allowing them to update their profile picture via a modal. How ...

javascriptjquerycss

Reload the Angular application and navigate to a different state

Introduction In my extensive angular application, there are numerous forms for various items. These forms are associated with action objects that have unique schemaforms. The dropdowns in these forms vary based on the specific action and its parent comp ...

javascriptangularjsstate.go

Angular restricts the use of the svg namespace in the $sce service for security reasons

I have a project in Angular Material where I am using an md-icon with a specific svg structure: <md-icon class="ic1" md-svg-src='data:image/svg+xml, <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 32 32"> <ellipse ry="16" rx=" ...

javascriptangularjssvgangularjs-material

Connecting the application's shopping cart to PayPal using the PayPal API

I'm looking to incorporate PayPal into my client's AngularJS app, allowing visitors to donate specific amounts of money towards different causes. However, I'm unsure of where to begin. My client wants visitors to be able to select a cause, e ...

angularjspaypalpaypal-sandbox

Is there an editor/IDE for PC that can handle HTML and PHP in real time?

Is there a PC IDE that enables live viewing of changes as you type? Can any IDE be configured to do so? Preferably for HTML and PHP both? ...

phphtmlide

Exploring the Power of Selenium in Python: Automating the Clicking of Expand Links Without Identifiers

Struggling to fill out a form in IE9 using Selenium and Python. The form is loaded with 'Expand/Collapse' links, all identical except for the text labels. No ID on them, just 'style' and 'onclick' attributes (though there migh ...

pythonhtmlseleniumexpand

Modify a quartet of divs simultaneously

I am currently working on a project that involves 4 input fields, each accompanied by a dropdown element for selecting currency. My goal is to create a JavaScript function that will update all input fields when one of them is changed. For instance, if I s ...

javascripthtml

How can I display different data values on each individual circle counter, rather than all circles showing the same data?

Hey there! I'm trying to get my circular counters to display the counter value that I specify in their class and data-percent. However, currently all four counters are only showing the data from the first counter, even though I've set different d ...

javascripthtmlcsscounter

What is the proper way to utilize the src attribute for connecting HTML code?

I've noticed that in HTML you can include scripts like this: <script src="myscripts.js"></script> But I was wondering, is it possible to link an entire HTML page? Something like this: <html src="testing.html">< ...

htmlweb

Retrieve data from a list using an API

I am currently working on creating a dynamic list by fetching data from an API. The goal is to display detailed information in a modal when a user clicks on a specific item in the list. While the list itself is functioning properly, I am encountering an i ...

javascriptangularjsbootstrap-modal

Having difficulty removing new or existing lines on StackBlitz

I attempted to experiment with React on StackBlitz, but I encountered a problem where I couldn't delete any lines of code. It seems that while I can add new lines of code, deleting them is not an option. Even when logging in with GitHub, the issue per ...

javascriptangularjsreactjstypescriptstackblitz

Access a dynamically generated HTML string from the code-behind and display it on a web page

Is there a more efficient way to open a static html string from code behind without writing it to a file? Currently, I am following the process below: using (StreamWriter sw = new StreamWriter("\\mypath\\test.html",false)) { sw ...

asp.nethtmlwebforms