Window.print( ) not taking the entire value of input element

Question

I've an angular application with invoicing functionality in it. I've used a bootstrap modal to design an invoice which you can see below in the image "before print". In this image, I've added 2 items in the invoice but when I go ahead and print the invoice modal using window.print() I see that the print page is not taking the entire value of the input element.

Eg. For the 1st item in an invoice page you can see the value entered as "Some Item - Black Color E Series 56565" but on the print page window.print() has taken only partial value as "Some Item - Black Color E Se" and rest is hidden.

The same thing can be noticed for a Narration input field at the bottom left corner of the page. How can we overcome this issue?

Note: I've used HTML input element for item as well as narration fields on an invoice page.

To help you more, I can provide you with a bit of the required codebase to understand this. Have a look at the code, and both the images below.

1. Angular Component Codebase

// this print method is called on click of Save & Print button
print() {
    // first save the invoice and if save is successfull then give a print command
    this.invoiceService.create(this.invoice)
      .subscribe(
        result => {
        console.log(result);
        if(result) window.print(); // print the invoice only if it is successfully saved
      },
      (error: AppError) => {
        this.error = true;
        this.errorMsg = 'Error occurred.';
        return ;
      });
  }

2. Style.css Codebase

@media print {
  html, body {
    height:100vh; 
    margin: 0 !important; 
    padding: 0 !important;
    overflow: hidden;
  }
  
  body * {
    visibility:hidden;
  }

  #printThis, #printThis * {
    visibility:visible;
  }

  .remove-item, .add-item, .modal-footer {
    display: none;
  }

  .hide-discount, .hide-freight {
    display: none;
  }

  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    overflow: visible!important;
  }

}

3. HTML Markup:

<div class="row">   
  <div class="items-table">
    <ng-container *ngFor="let item of items; let i=index;">
        <div class="row invoice-items" >
          <div class="col-4 input-container">
            <input [(ngModel)]="item.description" name="itemDescription" id="item" type="text" placeholder="Item name" >
          </div>
        </div>
    </ng-container>
  </div>
 </div>

4. CSS Styling for invoice page input elements:

.items-table input {
    line-height:1.5em;
}

input:focus {
    outline: 0;
}

.col-4.input-container input {
    width: 100%;
}

input:hover, textarea:hover, input:focus, textarea:focus {
    border: 1px solid #CCC;
}

This is a bare minimum styling I've used for input elements.

5. Image Before Print(Invoice Modal page)

6. Image After clicking on Save&Print button(Actual printing page)

You'll need to provide some of the markup (a minimal example) of the actual invoice. The modal isn't really the issue here. It's all the markup inside of it. — disinfor, Jan 31 '22 at 18:00
Ok, providing you with an **Item Name** input field markup along with the entire css codebase for the input elements in my invoice page. — Rupesh Bharuka, Jan 31 '22 at 18:12
@disinfor kindly look at the updated question above which is now available with the required markup and CSS styling code. — Rupesh Bharuka, Jan 31 '22 at 18:30

score 1 · Answer 1 · answered Feb 01 '22 at 08:57

Observation: I wish to bring one thing to your notice i.e. the issue was caused mainly because of the page size that we select at the time of printing a page. As I changed the size of a page & layout from portrait to landscape and vice-versa, I could see that it is accepting the character according to the space available on the page. Then, I tried changing the font size of the content on an invoice & I again tried the same with the issue fixed in this case.

So, font-size on an invoice page also matters as content can not be kept much larger because of the limited page size there on the print page.

You can take Reference from https://stackoverflow.com/a/66593515/15684466 question to do more settings like page horizontal or vertical scaling etc.

Below, code in the style.css has fixed my issue.

@media print {
  html, body {
    font-size: 75%; /* Fixed invoice print page content issue */
  }
}

Image with the appropriate content:

Window.print( ) not taking the entire value of input element

1 Answers1