@solidstarters/solid-core-ui 1.1.6 → 1.1.8

package/src/components/core/form/fields/SolidDecimalField.tsx

@@ -43,7 +43,7 @@ export class SolidDecimalField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -58,18 +58,14 @@ export class SolidDecimalField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
-                </div>
-                <div className="s-input">
                     <InputNumber
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}
                         id={fieldLayoutInfo.attrs.name}
                         minFractionDigits={2}
-                        className="small-input"
                         aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
                         onChange={(e: any) => {
                             formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
@@ -79,7 +75,6 @@ export class SolidDecimalField implements ISolidField {
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     )}
-                </div>
             </div>
         );
     }

package/src/components/core/form/fields/SolidIntegerField.tsx

@@ -44,7 +44,7 @@ export class SolidIntegerField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -59,27 +59,22 @@ export class SolidIntegerField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="s-input">
-                    <InputNumber
-                        readOnly={formReadonly || fieldReadonly}
-                        disabled={formDisabled || fieldDisabled}
-                        id={fieldLayoutInfo.attrs.name}
-                        className="small-input"
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={(e: any) => {
-                            formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
-                        }}
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    />
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
-                </div>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                </label>
+                <InputNumber
+                    readOnly={formReadonly || fieldReadonly}
+                    disabled={formDisabled || fieldDisabled}
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={(e: any) => {
+                        formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                    }}
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                />
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

package/src/components/core/form/fields/SolidJsonField.tsx

@@ -43,7 +43,7 @@ export class SolidJsonField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -55,25 +55,21 @@ export class SolidJsonField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="s-input">
-                    <CodeEditor
-                        formik={formik}
-                        field={fieldLayoutInfo.attrs.name}
-                        height={fieldLayoutInfo.attrs?.height}
-                        fontSize={fieldLayoutInfo.attrs?.fontSize}
-                        readOnly={formReadonly || fieldReadonly}
-                    >
-                    </CodeEditor>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
-                </div>
+                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                </label>
+                <CodeEditor
+                    formik={formik}
+                    field={fieldLayoutInfo.attrs.name}
+                    height={fieldLayoutInfo.attrs?.height}
+                    fontSize={fieldLayoutInfo.attrs?.fontSize}
+                    readOnly={formReadonly || fieldReadonly}
+                >
+                </CodeEditor>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

package/src/components/core/form/fields/SolidLongTextField.tsx

@@ -56,7 +56,7 @@ export class SolidLongTextField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -71,30 +71,25 @@ export class SolidLongTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="s-input">
-                    <InputTextarea
-                        readOnly={formReadonly || fieldReadonly}
-                        disabled={formDisabled || fieldDisabled}
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        rows={5}
-                        cols={30}
-
-                    />
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
-                </div>
-
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+
+                    &nbsp;   {fieldDescription && <span>({fieldDescription}) </span>}
+                </label>
+                <InputTextarea
+                    readOnly={formReadonly || fieldReadonly}
+                    disabled={formDisabled || fieldDisabled}
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={formik.handleChange}
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    rows={5}
+                    cols={30}
+                />
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }
 }
+

package/src/components/core/form/fields/SolidMediaMultipleField.tsx

@@ -88,7 +88,7 @@ export class SolidMediaMultipleField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -171,57 +171,53 @@ export class SolidMediaMultipleField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="s-input">
-                    <div
-                        {...getRootProps()}
-                        className="dropzone p-3 border-1 border-round surface-border"
-                    >
-                        <input {...getInputProps()}
-                        />
-                        {isDragActive ? (
-                            <DropzonePlaceholder />
-
-                        ) : imagesPreview.length > 0 ? (
-                            <div className="flex overflow-auto gap-3">
-                                {imagesPreview.map((preview, index) => (
-                                    <div key={index} className="relative">
-
-                                        <img
-                                            src={imageFormatHandler(preview) as string}
-                                            alt={`Preview ${index + 1}`}
-                                            className="bg-white h-10rem w-14rem"
-                                        />
-                                        <Button
-                                            type="button"
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                setDeleteImageDialogVisible(true);
-                                                const data = {
-                                                    index, e
-                                                }
-                                                setImageToBeDeletedData(data)
-                                            }}
-                                            icon="pi pi-trash"
-                                            severity="secondary"
-                                            outlined
-                                            className="absolute right-0 top-0 bg-white z-5 m-2"
-                                            style={{ height: 25, width: 25 }}
-                                        />
-                                        <DropzoneUpload />
-
-                                    </div>
-                                ))}
-                            </div>
-                        ) :
-                            <DropzonePlaceholder />
-                        }
-                    </div>
+                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                </label>
+                <div
+                    {...getRootProps()}
+                    className="dropzone p-3 border-1 border-round surface-border"
+                >
+                    <input {...getInputProps()}
+                    />
+                    {isDragActive ? (
+                        <DropzonePlaceholder />
+
+                    ) : imagesPreview.length > 0 ? (
+                        <div className="flex overflow-auto gap-3">
+                            {imagesPreview.map((preview, index) => (
+                                <div key={index} className="relative">
+
+                                    <img
+                                        src={imageFormatHandler(preview) as string}
+                                        alt={`Preview ${index + 1}`}
+                                        className="bg-white h-10rem w-14rem"
+                                    />
+                                    <Button
+                                        type="button"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            setDeleteImageDialogVisible(true);
+                                            const data = {
+                                                index, e
+                                            }
+                                            setImageToBeDeletedData(data)
+                                        }}
+                                        icon="pi pi-trash"
+                                        severity="secondary"
+                                        outlined
+                                        className="absolute right-0 top-0 bg-white z-5 m-2"
+                                        style={{ height: 25, width: 25 }}
+                                    />
+                                    <DropzoneUpload />
+
+                                </div>
+                            ))}
+                        </div>
+                    ) :
+                        <DropzonePlaceholder />
+                    }
 
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />

package/src/components/core/form/fields/SolidMediaSingleField.tsx

@@ -74,7 +74,7 @@ export class SolidMediaSingleField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -156,58 +156,54 @@ export class SolidMediaSingleField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="s-input">
-                    <div
-                        {...getRootProps()}
-                        className="dropzone p-3 border-1 border-round surface-border"
-                    >
-                        <input {...getInputProps()} />
-
-                        {isDragActive ? (
-                            <DropzonePlaceholder />
-                        ) : imagesPreview ? (
-                            <div className="relative">
-                                <img
-                                    src={imageFormatHandler(imagesPreview) as string}
-                                    alt="Banner Image"
-                                    className="bg-white h-10rem w-14rem"
-                                />
-                                <Button
-                                    type="button"
-                                    onClick={(e) => {
-                                        e.stopPropagation();
-                                        setDeleteImageDialogVisible(true);
-                                        const data = {
-                                            e, imagesPreview
-                                        }
-                                        setImageToBeDeletedData(data)
-                                    }}
-                                    icon="pi pi-trash"
-                                    severity="secondary"
-                                    outlined
-                                    aria-label="Bookmark"
-                                    className="absolute right-0 top-0 bg-white z-5 m-2"
-                                    style={{
-                                        height: 25,
-                                        width: 25,
-                                    }}
-                                />
-                                <DropzoneUpload />
-                            </div>
-                        ) : (
-                            <DropzonePlaceholder />
-                        )}
-                        { }
-                    </div>
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                </label>
+                <div
+                    {...getRootProps()}
+                    className="dropzone p-3 border-1 border-round surface-border"
+                >
+                    <input {...getInputProps()} />
+
+                    {isDragActive ? (
+                        <DropzonePlaceholder />
+                    ) : imagesPreview ? (
+                        <div className="relative">
+                            <img
+                                src={imageFormatHandler(imagesPreview) as string}
+                                alt="Banner Image"
+                                className="bg-white h-10rem w-14rem"
+                            />
+                            <Button
+                                type="button"
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    setDeleteImageDialogVisible(true);
+                                    const data = {
+                                        e, imagesPreview
+                                    }
+                                    setImageToBeDeletedData(data)
+                                }}
+                                icon="pi pi-trash"
+                                severity="secondary"
+                                outlined
+                                aria-label="Bookmark"
+                                className="absolute right-0 top-0 bg-white z-5 m-2"
+                                style={{
+                                    height: 25,
+                                    width: 25,
+                                }}
+                            />
+                            <DropzoneUpload />
+                        </div>
+                    ) : (
+                        <DropzonePlaceholder />
                     )}
+                    { }
                 </div>
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
                 <Dialog
                     visible={isDeleteImageDialogVisible}
                     header="Confirm Delete"

package/src/components/core/form/fields/SolidRichTextField.tsx

@@ -57,7 +57,7 @@ export class SolidRichTextField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -73,12 +73,9 @@ export class SolidRichTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
-                </div>
-                <div className="s-input">
                     <Editor
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}
@@ -91,8 +88,7 @@ export class SolidRichTextField implements ISolidField {
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     )}
-                </div>
             </div>
         );
     }
-}
+}

package/src/components/core/form/fields/SolidSelectionDynamicField.tsx

@@ -51,7 +51,7 @@ export class SolidSelectionDynamicField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -93,13 +93,10 @@ export class SolidSelectionDynamicField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
+                    <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
 
                         &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
                     </label>
-                </div>
-                <div className="s-input">
                     <AutoComplete
                         readOnly={formReadonly || fieldReadonly}
                         disabled={formDisabled || fieldDisabled}
@@ -108,7 +105,6 @@ export class SolidSelectionDynamicField implements ISolidField {
                         field="label"
                         value={formik.values[fieldLayoutInfo.attrs.name] || ''}
                         dropdown
-                        className="w-full small-input"
                         suggestions={selectionDynamicItems}
                         completeMethod={selectionDynamicSearch}
                         // onChange={(e) => updateInputs(index, e.value)} />
@@ -116,7 +112,6 @@ export class SolidSelectionDynamicField implements ISolidField {
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
                     )}
-                </div>
             </div>
         );
     }

package/src/components/core/form/fields/SolidSelectionStaticField.tsx

@@ -62,7 +62,7 @@ export class SolidSelectionStaticField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -88,30 +88,25 @@ export class SolidSelectionStaticField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-                    </label>
-                </div>
-                <div className="s-input">
-                    <AutoComplete
-                        readOnly={formReadonly || fieldReadonly}
-                        disabled={formDisabled || fieldDisabled}
-                        {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
-                        id={fieldLayoutInfo.attrs.name}
-                        field="label"
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                        dropdown
-                        className="w-full small-input"
-                        suggestions={selectionStaticItems}
-                        completeMethod={selectionStaticSearch}
-                        // onChange={(e) => updateInputs(index, e.value)} />
-                        onChange={formik.handleChange} />
-
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
-                </div>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+                </label>
+                <AutoComplete
+                    readOnly={formReadonly || fieldReadonly}
+                    disabled={formDisabled || fieldDisabled}
+                    {...formik.getFieldProps(fieldLayoutInfo.attrs.name)}
+                    id={fieldLayoutInfo.attrs.name}
+                    field="label"
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                    dropdown
+                    suggestions={selectionStaticItems}
+                    completeMethod={selectionStaticSearch}
+                    // onChange={(e) => updateInputs(index, e.value)} />
+                    onChange={formik.handleChange} />
+
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }

package/src/components/core/form/fields/SolidShortTextField.tsx

@@ -58,7 +58,7 @@ export class SolidShortTextField implements ISolidField {
     render(formik: FormikObject) {
         const fieldMetadata = this.fieldContext.fieldMetadata;
         const fieldLayoutInfo = this.fieldContext.field;
-        const className = fieldLayoutInfo.attrs?.className || 'col-12 s-field';
+        const className = fieldLayoutInfo.attrs?.className || 'field col-6 flex flex-column gap-2 mt-4';
         const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
         const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
         const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
@@ -73,28 +73,23 @@ export class SolidShortTextField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="justify-content-center align-items-center">
-                    <label htmlFor={fieldLayoutInfo.attrs.name}>{fieldLabel}
-                        &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
-
-                        {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
-                    </label>
-                </div>
-                <div className="s-input">
-                    <InputText
-                        readOnly={formReadonly || fieldReadonly}
-                        disabled={formDisabled || fieldDisabled}
-                        id={fieldLayoutInfo.attrs.name}
-                        className="small-input"
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    />
-                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
-                    )}
-                </div>
+                <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                    &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>}
+
+                    {/* &nbsp;   {fieldDescription &&  <span  className="form_field_help_text">`(${fieldDescription})` </span>} */}
+                </label>
+                <InputText
+                    readOnly={formReadonly || fieldReadonly}
+                    disabled={formDisabled || fieldDisabled}
+                    id={fieldLayoutInfo.attrs.name}
+                    aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                    onChange={formik.handleChange}
+                    value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                />
+                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                    <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                )}
             </div>
         );
     }
-}
+}