Support Article

Error message for Text input creates alignment issues

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>

Published December 5, 2016 - Updated December 9, 2016


0% found this useful

Have a question? Get answers now.

Visit the Collaboration Center to ask questions, engage in discussions, share ideas, and help others.