Change the style of the 'Sign' text in a signature field
How can I make the 'Sign' text more visible without cutting off the text at the bottom? Is there any way to make the text bold?
I am using this code
Results in this
Hi Jill Griggs,
Thank you for your patience. Could you please confirm whether your requirement is related to using signatureIndicatorSettings for the Signature field in the JavaScript PDF Viewer? From our understanding, you are currently facing an issue where the “Sign” text in the Signature field is being cut off at the bottom due to the limited height of the signature indicator.
If this is the case, you can adjust the height property in signatureIndicatorSettings to increase the indicator height and verify the output. Additionally, please note that bold styling for the signature indicator text is not supported at the PDF Viewer level.
However, at the application level, you can apply the following CSS style to achieve the expected appearance, as shown in the attached screenshot. We have also attached a working sample project demonstrating this approach.
Furthermore, based on the image you shared, it appears that you are using a custom height and UI for the Signature field in the PDF Viewer. If the above suggestion does not meet your expectations, please share:
- The PDF document you tested with, and
- A modified version of the sample project that reproduces the same appearance
This will help us accurately replicate the scenario on our side and provide a precise solution for your challenge in the PDF Viewer.
Code snippet:
viewer.signatureFieldSettings = {
signatureIndicatorSettings: {
fontSize: 7,
color: 'black',
width: 7,
//set required height for sign indicator
height: 15,
text: 'Sign',
},
};
Styles to add:
<style>
.e-pdfviewer-signatureformfields + span {
font-weight: bold;
}
</style>
Sample project with custom sign indicator settings
Snapshot:
Regards,
Venkada Subramanian D
