TextField fontsize changes after editing content

[kantsverma]

Feature requests, bug reports etc. are very welcome as issues. But questions are directed to stackoverflow with the tag jspdf.

If you are facing issues with utf-8 characters, please refer to #2677.

Note that bug reports should follow these guidelines:

1. A bug should be reported as an mcve
2. Make sure code is properly indented and formatted (Use ``` around code blocks)
3. You can run example here http://raw.githack.com/MrRio/jsPDF/master/ for AcroForms and download pdf and check the font size on chrome browser Initial font size for input value is ok when we chnge text it appear larger

/* global jsPDF */
var doc = new jsPDF();
var {
  TextField,
  Appearance
} = jsPDF.AcroForm;

doc.setFontSize(12);

doc.text("TextField:", 10, 145);
var textField = new TextField();
textField.Rect = [50, 140, 30, 10];
textField.multiline = false;
textField.value ="Test value"; //
textField.fieldName = "TestTextBox";
doc.addField(textField);

4. Please check ath attached Pdf and open it in chrome browser it show larger text inside input fields.
   AcroForms (2).pdf

[HackbrettXXX]

Textfields have their own fontSize property: http://raw.githack.com/MrRio/jsPDF/master/docs/module-AcroForm-AcroFormTextField.html. Use this.

[markandan]

@HackbrettXXX I tried using the fontSize property in the textField.. The value is not getting updated and the default value is retained.. Can you please help me with the code snippet of textField with changed fontSize

[HackbrettXXX]

If you make the text field large enough, the font size property should work. If there is too much text to fit the text field with the given font size, the text is scaled down to fit the text field.

[markandan]

Sorry not to elaborate on the use case earlier...
Use case
Need to create a PDF with blank Text Field
Users will be updating the value after download of the PDF
Font Size for the text field should be 40px

Problem
We had set the fontSize property, height of the textField is 40px as well. But when opening the PDF the textField fontSize is small and seems to take only 12px
We also tried using maxFontSize property as well..

If required I can write a code snippet in jsfiddle and share.

[HackbrettXXX]

Yes, please share a jsfiddle.

[markandan]

Please take a look at the codepen example... https://codepen.io/markandan/pen/JjEPRBj

I wanted the other text to be 24px and textfield size to be 20px, but the fontSize is not getting applied and the fontSize depends on the viewer (In Chrome it is very huge, firefox it is very small, etc..)

[HackbrettXXX]

Thanks for the fiddle. I think the issue is that the field is initially empty. When the field is not empty, the font size is correctly applied. However, as soon as the user edits the field text, the font size is scaled to the field size.

I'm not sure if we can do anything about that. From a quick glance at the PDF specification I could not find out how to set the font size of edited text. Could you maybe dig into that?

[github-actions]

This issue is stale because it has been open 90 days with no activity. It will be closed soon. Please comment/reopen if this issue is still relevant.

[ymc-thzi]

Have exactly the same issue. Found out as a quick fix workaround you can set formField.multiline = true;
Then it does not change the fontSize while and after editing 🤷🏻‍♂️