Extending input field length for long string inputs in Custom Forms

Products

• VMware Aria Suite

Issue/Introduction

This article provides instructions for extending the length of an input field on a custom form to better accommodate long string entries. The issue arises when input fields are set with a fixed width that is insufficient for longer text, leading to truncation and usability challenges.

Environment

VMware Aria Automation 8.x

Cause

In custom forms, input fields may have a fixed width that limits the amount of text visible at one time. This is problematic when users need to input or view longer strings, such as detailed directory paths or descriptions, which may be truncated when loaded into the form, making it difficult to read or reselect the content.

Resolution

Prerequisites

• You are familiar with CSS.
• You have a long string input in an object similar to a value picker tree.
• The selected input is truncated preventing you from reading properly what is selected.

Procedure

Extend the input field width using custom CSS:

The following CSS can be applied to ensure that the input field is appropriately sized to accommodate for longer strings:

#valuePickerTree_9ee1a398 input {
    width: 500px;
    max-width: 500px;
    margin: 0;
    padding: 0;
    padding-left: 0;
    box-sizing: border-box;
    flex-grow: 1;
    display: inline-block; /* Prevent line breaks */
}

Implementation:

1. Identify the input field in the custom form where the issue occurs.
2. Apply the above custom CSS to the specific input field to extend its width
3. Test the form to ensure that longer string values are fully visible and that the form layout remains consistent.

Note: Details in your environment may differ. This is offered as an example to guide similar scenarios.