@solidstarters/solid-core-ui 1.1.27 → 1.1.28

package/src/components/core/filter/fields/SolidUuidField.tsx

@@ -13,7 +13,7 @@ const SolidUuidField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
     const numberOfInputs = getNumberOfInputs(rule.matchMode);
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -22,18 +22,22 @@ const SolidUuidField = ({ fieldMetadata, onChange, index, rule }: SolidFilterFie
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(rule.id, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.Text}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(rule.id, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.Text}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/filter/fields/relations/SolidRelationManyToOneField.tsx

@@ -48,7 +48,7 @@ const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: S
     // const header = column.attrs.label ?? fieldMetadata.displayName;
 
     return (
-        <>
+        <div className='flex align-items-start gap-3 w-full'>
             <Dropdown
                 value={rule.matchMode}
                 onChange={(e: any) => {
@@ -57,18 +57,22 @@ const SolidRelationManyToOneField = ({ fieldMetadata, onChange, index, rule }: S
                 options={filterMatchModeOptions}
                 optionLabel='label'
                 optionValue='value'
-                placeholder="Select Operator" className="w-full md:w-14rem" />
-            <SolidVarInputsFilterElement
-                values={rule.value}
-                onChange={(e: any) => {
-                    onChange(index, 'value', e)
-                }}
-                numberOfInputs={numberOfInputs}
-                inputType={InputTypes.RelationManyToOne}
-                fieldMetadata={fieldMetadata}
-            >
-            </SolidVarInputsFilterElement>
-        </>
+                placeholder="Select Operator"
+                className="w-full p-inputtext-sm"
+            />
+            <div className='flex flex-column gap-2 w-full'>
+                <SolidVarInputsFilterElement
+                    values={rule.value}
+                    onChange={(e: any) => {
+                        onChange(index, 'value', e)
+                    }}
+                    numberOfInputs={numberOfInputs}
+                    inputType={InputTypes.RelationManyToOne}
+                    fieldMetadata={fieldMetadata}
+                >
+                </SolidVarInputsFilterElement>
+            </div>
+        </div>
     );
 
 };

package/src/components/core/form/SolidFormView.tsx

@@ -38,6 +38,8 @@ import { SolidBreadcrumb } from "@/components/common/SolidBreadcrumb";
 import { SolidUiEvent } from "@/types";
 import { getExtensionComponent, getExtensionFunction } from "@/helpers/registry";
 import { SolidFormWidgetProps } from "@/types/solid-core";
+import { SolidPasswordField } from "./fields/SolidPasswordField";
+import { SolidEmailField } from "./fields/SolidEmailField";
 
 export type SolidFormViewProps = {
     moduleName: string;
@@ -129,6 +131,12 @@ const fieldFactory = (type: string, fieldContext: SolidFieldProps): ISolidField
     if (type === 'mediaMultiple') {
         return new SolidMediaMultipleField(fieldContext);
     }
+    if (type === 'password') {
+        return new SolidPasswordField(fieldContext);
+    }
+    if (type === 'email') {
+        return new SolidEmailField(fieldContext);
+    }
     return null;
 }
 
@@ -1095,7 +1103,12 @@ const SolidFormView = (params: SolidFormViewProps) => {
                             </>
                         )}
                     </div>
-                    <SolidBreadcrumb />
+                    {params.embeded !== true &&
+                        <SolidBreadcrumb
+                            solidViewData={solidFormViewMetaData?.data?.solidView?.model}
+                            initialEntityData={initialEntityData}
+                        />
+                    }
                     {/* {params.embeded !== true &&
                         <div className="solid-form-stepper">
                             <SolidFormStepper />

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

@@ -84,39 +84,41 @@ export class SolidBooleanField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    {/* <InputText
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        {/* <InputText
                         id={fieldLayoutInfo.attrs.name}
                         className="small-input"
                         aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
                         onChange={formik.handleChange}
                         value={formik.values[fieldLayoutInfo.attrs.name] || ''}
                     /> */}
-                    <SelectButton
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={(e) => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)} // Custom handling for boolean input
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name].toString() : "false"}
-                        options={booleanOptions}
-                        className={classNames("", {
-                            "p-invalid": isFormFieldValid(formik, "defaultValue"),
-                        })}
-
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        <SelectButton
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            id={fieldLayoutInfo.attrs.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            onChange={(e) => formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)} // Custom handling for boolean input
+                            value={formik.values[fieldLayoutInfo.attrs.name] ? formik.values[fieldLayoutInfo.attrs.name].toString() : "false"}
+                            options={booleanOptions}
+                            className={classNames("", {
+                                "p-invalid": isFormFieldValid(formik, "defaultValue"),
+                            })}
+
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

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

@@ -63,33 +63,35 @@ export class SolidDateField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <Calendar
-                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                        ref={calendarRef} // Attach ref to Calendar
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        //@ts-ignore
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                        // dateFormat="mm/dd/yy"
-                        // placeholder="mm/dd/yyyy hh:mm"
-                        mask="99/99/9999 99:99"
-                        hideOnDateTimeSelect
-                        className=""
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <Calendar
+                            disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                            ref={calendarRef} // Attach ref to Calendar
+                            id={fieldLayoutInfo.attrs.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            onChange={formik.handleChange}
+                            //@ts-ignore
+                            value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                            // dateFormat="mm/dd/yy"
+                            // placeholder="mm/dd/yyyy hh:mm"
+                            mask="99/99/9999 99:99"
+                            hideOnDateTimeSelect
+                            className=""
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

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

@@ -61,35 +61,37 @@ export class SolidDateTimeField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <Calendar
-                        disabled={formDisabled || fieldDisabled || readOnlyPermission}
-                        ref={calendarRef} // Attach ref to Calendar
-                        id={fieldLayoutInfo.attrs.name}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={formik.handleChange}
-                        //@ts-ignore
-                        value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
-                        // dateFormat="mm/dd/yy"
-                        // placeholder="mm/dd/yyyy hh:mm"
-                        mask="99/99/9999 99:99"
-                        hideOnDateTimeSelect
-                        showTime className=""
-                        hourFormat="24"
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <Calendar
+                            disabled={formDisabled || fieldDisabled || readOnlyPermission}
+                            ref={calendarRef} // Attach ref to Calendar
+                            id={fieldLayoutInfo.attrs.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            onChange={formik.handleChange}
+                            //@ts-ignore
+                            value={formik.values[fieldLayoutInfo.attrs.name] ? new Date(formik.values[fieldLayoutInfo.attrs.name]) : Date()}
+                            // dateFormat="mm/dd/yy"
+                            // placeholder="mm/dd/yyyy hh:mm"
+                            mask="99/99/9999 99:99"
+                            hideOnDateTimeSelect
+                            showTime className=""
+                            hourFormat="24"
 
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

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

@@ -72,24 +72,26 @@ export class SolidDecimalField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <InputNumber
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        disabled={formDisabled || fieldDisabled}
-                        id={fieldLayoutInfo.attrs.name}
-                        minFractionDigits={2}
-                        aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
-                        onChange={(e: any) => {
-                            formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
-                        }}
-                        value={formik.values[fieldLayoutInfo.attrs.name] || ''}
-                    />
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <InputNumber
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            id={fieldLayoutInfo.attrs.name}
+                            minFractionDigits={2}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            onChange={(e: any) => {
+                                formik.setFieldValue(fieldLayoutInfo.attrs.name, e.value)
+                            }}
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        />
+                    </div>
                     {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
                         <div className="absolute mt-1">
                             <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />

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

@@ -0,0 +1,113 @@
+'use client';
+import { InputText } from "primereact/inputtext";
+import { Message } from "primereact/message";
+import * as Yup from 'yup';
+import { Schema } from "yup";
+import { FormikObject, ISolidField, SolidFieldProps } from "./ISolidField";
+
+export class SolidEmailField implements ISolidField {
+
+    private fieldContext: SolidFieldProps;
+
+    constructor(fieldContext: SolidFieldProps) {
+        this.fieldContext = fieldContext;
+    }
+
+    updateFormData(value: any, formData: FormData): any {
+        const fieldLayoutInfo = this.fieldContext.field;
+        if (value) {
+            formData.append(fieldLayoutInfo.attrs.name, value);
+        }
+    }
+
+    initialValue(): any {
+        const fieldName = this.fieldContext.field.attrs.name;
+        const fieldDefaultValue = this.fieldContext?.fieldMetadata?.defaultValue;
+
+        const existingValue = this.fieldContext.data[fieldName];
+
+        return existingValue !== undefined && existingValue !== null ? existingValue : fieldDefaultValue || '';
+    }
+
+    validationSchema(): Schema {
+        let schema: Yup.StringSchema<string | null | undefined> = Yup.string();
+
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+
+        // 1. required 
+        // 1. required
+        if (fieldMetadata.required) {
+            schema = schema.required(`${fieldLabel} is required.`);
+        } else {
+            schema = schema.nullable(); // Allow null when not required
+        }
+
+        // 2. length (min/max)
+        if (fieldMetadata.min && fieldMetadata.min > 0) {
+            schema = schema.min(fieldMetadata.min, `${fieldLabel} should be at-least ${fieldMetadata.min} characters long.`);
+        }
+        if (fieldMetadata.max && fieldMetadata.max > 0) {
+            schema = schema.max(fieldMetadata.max, `${fieldLabel} should not be more than ${fieldMetadata.max} characters long.`);
+        }
+        // 3. regular expression
+        if (fieldMetadata.regexPattern) {
+            const regexPatternNotMatchingErrorMsg = fieldMetadata.regexPatternNotMatchingErrorMsg ?? `${fieldLabel} has invalid data.`
+            schema = schema.matches(fieldMetadata.regexPattern, regexPatternNotMatchingErrorMsg);
+        }
+
+        return schema;
+    }
+
+    render(formik: FormikObject) {
+        const fieldMetadata = this.fieldContext.fieldMetadata;
+        const fieldLayoutInfo = this.fieldContext.field;
+        const className = fieldLayoutInfo.attrs?.className || 'field col-12';
+        const fieldLabel = fieldLayoutInfo.attrs.label ?? fieldMetadata.displayName;
+        const fieldDescription = fieldLayoutInfo.attrs.description ?? fieldMetadata.description;
+        const solidFormViewMetaData = this.fieldContext.solidFormViewMetaData;
+        const showFieldLabel = fieldLayoutInfo?.attrs?.showLabel;
+        const readOnlyPermission = this.fieldContext.readOnly;
+
+        const isFormFieldValid = (formik: any, fieldName: string) => formik.touched[fieldName] && formik.errors[fieldName];
+
+        const fieldDisabled = fieldLayoutInfo.attrs?.disabled;
+        const fieldReadonly = fieldLayoutInfo.attrs?.readonly;
+
+        const formDisabled = solidFormViewMetaData.data.solidView?.layout?.attrs?.disabled;
+        const formReadonly = solidFormViewMetaData.data.solidView?.layout?.attrs?.readonly;
+
+        return (
+            <div className={className}>
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">
+                                {fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <InputText
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            disabled={formDisabled || fieldDisabled}
+                            id={fieldLayoutInfo.attrs.name}
+                            name={fieldMetadata.name}
+                            aria-describedby={`${fieldLayoutInfo.attrs.name}-help`}
+                            // onChange={formik.handleChange}
+                            onChange={(e) => this.fieldContext.onChange(e, 'onFieldChange')}
+                            onBlur={(e) => this.fieldContext.onBlur(e, 'onFieldBlur')}
+                            value={formik.values[fieldLayoutInfo.attrs.name] || ''}
+                        />
+                    </div>
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
+            </div>
+        );
+    }
+}

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

@@ -73,29 +73,31 @@ export class SolidIntegerField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
-                        </label>
-                    }
-                    <InputNumber
-                        readOnly={formReadonly || fieldReadonly || readOnlyPermission}
-                        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] || ''}
-                    />
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &nbsp;   {fieldDescription && <span className="form_field_help">({fieldDescription}) </span>} */}
+                            </label>
+                        }
+                        <InputNumber
+                            readOnly={formReadonly || fieldReadonly || readOnlyPermission}
+                            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] || ''}
+                        />
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }

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

@@ -57,27 +57,29 @@ export class SolidJsonField implements ISolidField {
 
         return (
             <div className={className}>
-                <div className="flex flex-column gap-2 mt-4">
-                    {showFieldLabel != false &&
-                        <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
-                            {fieldMetadata.required && <span className="text-red-500"> *</span>}
-                            {/* &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 || readOnlyPermission}
-                    >
-                    </CodeEditor>
-                </div>
-                {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
-                    <div className="absolute mt-1">
-                        <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                <div className="relative">
+                    <div className="flex flex-column gap-2 mt-4">
+                        {showFieldLabel != false &&
+                            <label htmlFor={fieldLayoutInfo.attrs.name} className="form-field-label">{fieldLabel}
+                                {fieldMetadata.required && <span className="text-red-500"> *</span>}
+                                {/* &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 || readOnlyPermission}
+                        >
+                        </CodeEditor>
                     </div>
-                )}
+                    {isFormFieldValid(formik, fieldLayoutInfo.attrs.name) && (
+                        <div className="absolute mt-1">
+                            <Message severity="error" text={formik?.errors[fieldLayoutInfo.attrs.name]?.toString()} />
+                        </div>
+                    )}
+                </div>
             </div>
         );
     }