SA-31080

Summary

The user has a section containing text input field and a button control next to the text input. Validation is set on the text input field. At run time when validation is triggered, there is a space observed between the text input and the button. 

Error Messages

Not Applicable

Steps to Reproduce

1. Create a section and add text input and a button in same row.
2. Map the text input to a property - which accept numeric values. Set max length and Expected length as 15 in property validation.
3. Execute the section and enter 10 characters and submit it. It will display error message "The field  should be at least 16 characters long".
4.  Due to this error message, the "Apply" button gets re-aligned improperly.

Root Cause

Standard text input size used at user's end is 340px. However out of the box text input has a width set to auto.This resulted in space between the text input as well as the button. 


As seen in the above image the OOTB error message has a width set to auto

Resolution

1. Set the width of the Text input to 100%(Text Input width) 
2. Set the width of the error message to 340px. In order to do this, add the below code in the UserWorkform.

<style>
    div.gridDefault .dynamic-icon-error-div > .dynamic-icon-error, .dynamic-icon-error-div > .dynamic-icon-error  {
    width: auto
 </style>