Acroforms fields are misaligned

[sarathn91]

As seem in the screenshot, the fields in the Acroform are misaligned.

I'm on angular. and issue is reproduced in stackblitz. Whatever forms I try, the fields are slightly misaligned.
Sameple Acroform.pdf

https://stackblitz.com/edit/stackblitz-starters-yntxjfdg

Could someone look into my code and tell me what am I doing wrong here? I've also attached the sample form seen in the screenshot.

[calixteman]

The canvas wrapper element has not the same dimensions as the text layer or the annotation layer.

[sarathn91]

The canvas wrapper element has not the same dimensions as the text layer or the annotation layer.

@calixteman Any idea what's causing it and how to fix? I don't think I've any code that manually sets the dimensions

[calixteman]

Sorry but it's up to you to debug your stuff. I gave you a clue and at least you know now where to start to look at.

[sarathn91]

.pdfViewer .page{
  --user-unit:1;
  --total-scale-factor:calc(var(--scale-factor) * var(--user-unit));
  --scale-round-x:1px;
  --scale-round-y:1px;

  direction:ltr;
  width:816px;
  height:1056px;
  margin:var(--page-margin);
  position:relative;
  overflow:visible;
  border:var(--page-border);
  background-clip:content-box;
  background-color:var(--page-bg-color, rgb(255 255 255));
}

Issue was because the pdf_viewer.css was adding margin and border to all pages and I had to override it

.pdfViewer .page {
  margin: 0 !important;
  border: none !important;
}

Thanks for your input.