switch to bootstrap italia through AI

react/common/src/ElixFormsComponent.module.scss

@@ -1,34 +1,28 @@
-@import '~@fluentui/react/dist/sass/References.scss';
-
 .elixFormsComponent {
   overflow: hidden;
   padding: 1em;
-  color: "[theme:bodyText, default: #323130]";
-  color: var(--bodyText);
-  &.teams {
-    font-family: $ms-font-family-fallbacks;
-  }
 }
 
-.welcome {
-  text-align: center;
+.autocompleteDropdown {
+  margin-top: 0.5rem;
+  border: 1px solid #c9d1d9;
+  border-radius: 0.5rem;
+  background: #fff;
+  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.08);
 }
 
-.welcomeImage {
-  width: 100%;
-  max-width: 420px;
+.autocompleteItem {
+  padding: 0.75rem 1rem;
+  cursor: pointer;
 }
 
-.links {
-  a {
-    text-decoration: none;
-    color: "[theme:link, default:#03787c]";
-    color: var(--link); // note: CSS Custom Properties support is limited to modern browsers only
+.autocompleteItem:hover,
+.autocompleteItem.isHighlighted {
+  background-color: #f5f7fa;
+}
 
-    &:hover {
-      text-decoration: underline;
-      color: "[theme:linkHovered, default: #014446]";
-      color: var(--linkHovered); // note: CSS Custom Properties support is limited to modern browsers only
-    }
-  }
+.autocompleteStatus {
+  margin-top: 0.5rem;
+  font-size: 0.95rem;
+  color: #5c6f82;
 }

react/common/src/ElixFormsComponentAbstract.tsx

@@ -1,10 +1,9 @@
-import './App.css'
-import * as FluentUI from '@fluentui/react';
+import './App.css';
 import type { IElixFormsComponentFormState } from './IElixFormsComponentFormState';
 import type { IElixFormsComponentProperties } from './IElixFormsComponentProperties';
 import { ElixFormsElement } from './ElixFormsElement';
 import { QueryParamHelper } from './QueryParamHelper';
-import { Component, type FormEvent, type JSX, useState } from 'react';
+import { Component, type JSX } from 'react';
 import React from 'react';
 import type { IElixFormsComponentCustomFormFieldFactory } from './IElixFormsComponentCustomFormFieldFactory';
 import type { ElixFormsCheckboxOption, ElixFormsDropdownOption, ElixFormsRadioOption } from './ElixFormsTypes';
@@ -16,57 +15,26 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
     this.state = {
       formData: {}
     };
-
-    // const [formData, setFormData] = useState({});
-    // const handleAnyInputChange = (name: string) => (event: any, valueOrOption: any) => { //ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement> | SyntheticEvent<HTMLElement, Event>
-    //   let value: any = null;
-    //   // Fluent UI Dropdown passes (event, option)
-    //   if (valueOrOption && valueOrOption.key !== undefined) {
-    //     value = valueOrOption.key;
-    //   }
-    //   // Fluent UI TextField passes (event, newValue)
-    //   else if (typeof valueOrOption === "string") {
-    //     value = valueOrOption;
-    //   }
-    //   // Fluent UI Checkbox passes (event, checked)
-    //   else if (typeof valueOrOption === "boolean") {
-    //     value = valueOrOption;
-    //   }
-    //   // Native HTML inputs
-    //   else if (event?.target) {
-    //     value = event.target.type === "checkbox"
-    //       ? event.target.checked
-    //       : event.target.value;
-    //   }
-    //   setFormData(prev => ({
-    //     ...prev,
-    //     [name]: value
-    //   }));
-    //   console.log(`Input ${name} changed to ${value}. Current form data:`, JSON.stringify(formData));
-    // };
   }
 
   private checkboxValues = new Map<string, number[]>();
 
   private mandatoryFormFieldNames: string[] = [
-    "RWE2_MODULE_ID",
-    "RWE2_REQUEST_ID",
-    "custom-workflow-back-url",
-    "custom-workflow-generic-id",
-    "custom-workflow-current-tabrel-genid",
-    "custom-workflow-source-field",
-    "crc",
-    "MODULE_TESTMODE_KEY",
-    "ELANG"
+    'RWE2_MODULE_ID',
+    'RWE2_REQUEST_ID',
+    'custom-workflow-back-url',
+    'custom-workflow-generic-id',
+    'custom-workflow-current-tabrel-genid',
+    'custom-workflow-source-field',
+    'crc',
+    'MODULE_TESTMODE_KEY',
+    'ELANG'
   ];
 
   private createMandatoryFormFields(queryParams: URLSearchParams): JSX.Element {
     const hiddenInputs: JSX.Element[] = [];
 
-    // Create a hidden input for each mandatory Elix parameter
     this.mandatoryFormFieldNames.forEach(paramName => {
-      const value = queryParams.get(paramName) ?? "";
-      // Create the input element
       hiddenInputs.push(this.createHiddenInput(paramName));
     });
 
@@ -74,7 +42,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
   }
 
   private createAdditionalFormFields(): React.ReactElement {
-    const schema = JSON.parse(this.props.additionalFieldsJson || "[]");
+    const schema = JSON.parse(this.props.additionalFieldsJson || '[]');
 
     return (
       <>
@@ -125,10 +93,7 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
   public override render(): React.ReactElement<IElixFormsComponentProperties> {
     const {
       description,
-      isDarkTheme,
       environmentMessage,
-      hasTeamsContext,
-      userDisplayName,
       additionalFieldsJson,
       headerTitle,
       pageTitle,
@@ -151,7 +116,10 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                   <div className="console_header">
                     <div className="leftDiv">
                       <h1>elixForms</h1>
-                      <div className="logo"><a href="https://www.unipr.it/" title="Torna alla homepage dell'Università: di Parma"><img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università: di Parma" /></a>
+                      <div className="logo">
+                        <a href="https://www.unipr.it/" title="Torna alla homepage dell'Università di Parma">
+                          <img src="https://console-unipr.elixforms.it/elixFormsCustom/images/logo.png" alt="Logo Università di Parma" />
+                        </a>
                       </div>
                     </div>
                     <div className="rightDiv">
@@ -176,29 +144,28 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
                   </div>
                 )}
                 <div className="mainview">
-                  <div className="container">
-                    {pageTitle && <h1>{pageTitle}</h1>}
-                    {heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image" />}
-                    {pageDescription && <p>{pageDescription}</p>}
+                  <div className="container py-4">
+                    {pageTitle && <h1 className="mb-3">{pageTitle}</h1>}
+                    {heroImageSrc && <img src={heroImageSrc} alt="Hero Image" className="hero-image img-fluid mb-3" />}
+                    {pageDescription && <p className="lead">{pageDescription}</p>}
 
-                    {environmentMessage && <div>{environmentMessage}</div>}
-                    {description && <div>{description}</div>}
+                    {environmentMessage && <div className="alert alert-info">{environmentMessage}</div>}
+                    {description && <div className="mb-3">{description}</div>}
 
                     {hasAuthenticationError ? (
-                      <FluentUI.MessageBar messageBarType={FluentUI.MessageBarType.error} isMultiline={false}>
+                      <div className="alert alert-danger" role="alert">
                         Accesso non autorizzato. Parametri obbligatori mancanti ({missingMandatoryParams.join(', ')}).
-                      </FluentUI.MessageBar>
+                      </div>
                     ) : (
                       <>
                         {this.renderExtraContentPre()}
 
-                        <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1">
+                        <form action="https://procedure.unipr.it/rwe2/ComeBackToElixAndSave" method="post" acceptCharset="ISO-8859-1" className="mt-3">
                           {this.createMandatoryFormFields(queryParams)}
                           {this.createAdditionalFormFields()}
                           {this.renderCustomFormFields()}
-                          <br />
-                          <div className='submit'>
-                            <input type="submit" value={submitDescription ?? 'Submit'} />
+                          <div className="mt-4 d-flex justify-content-start">
+                            <button type="submit" className="btn btn-primary">{submitDescription ?? 'Invia'}</button>
                           </div>
                         </form>
 
@@ -240,158 +207,180 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
       this.checkboxValues.set(paramName, checkedValues);
     }
 
-    const checkboxes: React.ReactElement[] = [];
-    const stackTokens = { childrenGap: 10 };
-
-    values.forEach((entry, entryIndex) => {
-      const id = `${paramName}_${entryIndex}`;
-      checkboxes.push(
-        <FluentUI.Checkbox title={label} key={id} id={id} label={entry.label} required={entry.required ?? false} defaultChecked={checkedValues.indexOf(entryIndex) !== -1} className='isiportalPartialAdminCheckboxFieldItem'
-          onChange={(event, checked) => {
-            const currentCheckboxValues = this.checkboxValues.get(paramName)!;
-            const checkboxIndex = currentCheckboxValues.indexOf(entryIndex);
-            if (checked && checkboxIndex === -1) {
-              currentCheckboxValues.push(entryIndex);
-            } else if (!checked && checkboxIndex !== -1) {
-              currentCheckboxValues.splice(checkboxIndex, 1);
-            }
-            const newValue = currentCheckboxValues.join(',').trim();
-            this.setState({ formData: { ...this.state.formData, [paramName]: newValue } }, () => {
-              console.log(`Checkbox ${id} changed to ${checked}. Current values for ${paramName}: ${this.state.formData[paramName]}`);
-            });
-          }}
-        />
-      );
-    });
-
     const currentValue = this.state.formData[paramName] !== undefined
       ? this.state.formData[paramName]
       : (this.checkboxValues.get(paramName)?.join(',').trim() ?? '');
 
+    const selectedValues = (currentValue || '').split(',').filter(Boolean).map((value: string) => Number(value));
+
     return new ElixFormsElement(
-      <><FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label></>,
-      <><FluentUI.Stack tokens={stackTokens}>
-        {checkboxes}
-      </FluentUI.Stack>
-        <input type='hidden' id={paramName} name={paramName} value={currentValue} />
+      <label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
+      <>
+        <div className="d-flex flex-column gap-2" role="group" aria-label={label}>
+          {values.map((entry, entryIndex) => {
+            const id = `${paramName}_${entryIndex}`;
+            const isChecked = selectedValues.includes(entryIndex);
+
+            return (
+              <div className="form-check" key={id}>
+                <input
+                  id={id}
+                  className="form-check-input"
+                  type="checkbox"
+                  checked={isChecked}
+                  onChange={(event) => {
+                    const currentCheckboxValues = this.checkboxValues.get(paramName) ?? [];
+                    const checkboxIndex = currentCheckboxValues.indexOf(entryIndex);
+                    const nextValues = [...currentCheckboxValues];
+
+                    if (event.target.checked && checkboxIndex === -1) {
+                      nextValues.push(entryIndex);
+                    } else if (!event.target.checked && checkboxIndex !== -1) {
+                      nextValues.splice(checkboxIndex, 1);
+                    }
+
+                    this.checkboxValues.set(paramName, nextValues);
+                    const newValue = nextValues.join(',').trim();
+                    this.setState({ formData: { ...this.state.formData, [paramName]: newValue } });
+                  }}
+                />
+                <label className="form-check-label" htmlFor={id}>{entry.label}</label>
+              </div>
+            );
+          })}
+        </div>
+        <input type="hidden" id={paramName} name={paramName} value={currentValue} />
       </>
     ).render();
   }
 
   private createRadioInput(paramName: string, label: string, values: Array<ElixFormsRadioOption>, required: boolean = false): JSX.Element {
-    const radioValue = QueryParamHelper.getOptionFromQuery(paramName);
-    const radios: FluentUI.IChoiceGroupOption[] = [];
-
-    values.forEach((entry, _) => {
-      const id = `${paramName}_${entry.value}`;
-      radios.push(
-        {
-          key: id,
-          text: entry.label,
-          id: id,
-          name: paramName,
-          value: entry.value,
-          className: 'isiportalPartialAdminFormFieldRadio'
-        }
-      );
-    });
+    const currentValue = this.state.formData[paramName] !== undefined
+      ? String(this.state.formData[paramName])
+      : String(QueryParamHelper.getOptionFromQuery(paramName) ?? '');
 
     return new ElixFormsElement(
-      <></>,
-      <FluentUI.ChoiceGroup
-        name={paramName}
-        label={label}
-        options={radios}
-        required={required}
-        defaultSelectedKey={`${paramName}_${radioValue}`}
-        onChange={(event, option) => {
-          const value = option?.value ?? '';
-          this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
-            console.log(`Radio ${option?.id} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
+      <span className="form-label fw-semibold">{label}</span>,
+      <div className="d-flex flex-column gap-2" role="radiogroup" aria-label={label}>
+        {values.map((entry) => {
+          const id = `${paramName}_${entry.value}`;
+          return (
+            <div className="form-check" key={id}>
+              <input
+                id={id}
+                className="form-check-input"
+                type="radio"
+                name={paramName}
+                value={entry.value}
+                checked={currentValue === String(entry.value)}
+                onChange={() => {
+                  this.setState({ formData: { ...this.state.formData, [paramName]: String(entry.value) } });
+                }}
+                required={required}
+              />
+              <label className="form-check-label" htmlFor={id}>{entry.label}</label>
+            </div>
           );
-        }}
-      />
+        })}
+      </div>
     ).render();
   }
 
   private createBooleanInput(paramName: string, label: string, required: boolean = false): JSX.Element {
-    const boolValue = QueryParamHelper.getOptionFromQuery(paramName);
-    const radios: FluentUI.IChoiceGroupOption[] = [];
-
-    [{ "value": "true", "label": "Sì" }, { "value": "false", "label": "No" }].forEach((val) => {
-      const id = `${paramName}_${val.value}`;
-      radios.push(
-        {
-          key: id,
-          text: val.label,
-          id: id,
-          name: paramName,
-          value: val.value,
-          className: 'isiportalPartialAdminFormFieldRadio'
-        }
-      );
-    });
+    const currentValue = this.state.formData[paramName] !== undefined
+      ? String(this.state.formData[paramName])
+      : String(QueryParamHelper.getOptionFromQuery(paramName) ?? '');
 
     return new ElixFormsElement(
-      <></>,
-      <FluentUI.ChoiceGroup
-        name={paramName}
-        label={label}
-        options={radios}
-        required={required}
-        defaultSelectedKey={`${paramName}_${boolValue}`}
-        onChange={(event, option) => {
-          const value = option?.value ?? '';
-          this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
-            console.log(`Boolean ${option?.id} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
+      <span className="form-label fw-semibold">{label}</span>,
+      <div className="d-flex flex-column gap-2" role="radiogroup" aria-label={label}>
+        {[{ value: 'true', label: 'Sì' }, { value: 'false', label: 'No' }].map((val) => {
+          const id = `${paramName}_${val.value}`;
+          return (
+            <div className="form-check" key={id}>
+              <input
+                id={id}
+                className="form-check-input"
+                type="radio"
+                name={paramName}
+                value={val.value}
+                checked={currentValue === val.value}
+                onChange={() => {
+                  this.setState({ formData: { ...this.state.formData, [paramName]: val.value } });
+                }}
+                required={required}
+              />
+              <label className="form-check-label" htmlFor={id}>{val.label}</label>
+            </div>
           );
-        }}
-      />
+        })}
+      </div>
     ).render();
   }
 
   private createTextAreaInput(paramName: string, label: string, required: boolean = false): JSX.Element {
-    const textareaValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
+    const currentValue = this.state.formData[paramName] !== undefined
+      ? String(this.state.formData[paramName])
+      : (QueryParamHelper.getDecodedTextFromQuery(paramName) ?? '');
+
     return new ElixFormsElement(
-      <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
-      <FluentUI.TextField id={paramName} name={paramName} defaultValue={textareaValue} multiline rows={4} required={required} className='isiportalPartialAdminFormFieldMultiLineText'
-        onChange={(event, value) => {
-          this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
-            console.log(`TextArea ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
-          );
+      <label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
+      <textarea
+        id={paramName}
+        name={paramName}
+        className="form-control"
+        rows={4}
+        required={required}
+        value={currentValue}
+        onChange={(event) => {
+          this.setState({ formData: { ...this.state.formData, [paramName]: event.target.value } });
         }}
       />
     ).render();
   }
 
   private createTextInput(paramName: string, label: string, required: boolean = false): JSX.Element {
-    const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
+    const currentValue = this.state.formData[paramName] !== undefined
+      ? String(this.state.formData[paramName])
+      : (QueryParamHelper.getDecodedTextFromQuery(paramName) ?? '');
+
     return new ElixFormsElement(
-      <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
-      <FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} required={required} className='isiportalPartialAdminFormFieldSingleLineText'
-        onChange={(event, value) => {
-          this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
-            console.log(`TextInput ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
-          );
+      <label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
+      <input
+        id={paramName}
+        name={paramName}
+        className="form-control"
+        type="text"
+        required={required}
+        value={currentValue}
+        onChange={(event) => {
+          this.setState({ formData: { ...this.state.formData, [paramName]: event.target.value } });
         }}
       />
     ).render();
   }
 
   private createHiddenInput(paramName: string): JSX.Element {
-    const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
-    return <input type="hidden" id={`${paramName}_hidden`} name={paramName} defaultValue={textValue} />;
+    const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? '';
+    return <input type="hidden" id={`${paramName}_hidden`} name={paramName} value={textValue} />;
   }
 
   private createNumberInput(paramName: string, label: string, required: boolean = false): JSX.Element {
-    const textValue = QueryParamHelper.getDecodedTextFromQuery(paramName) ?? "";
+    const currentValue = this.state.formData[paramName] !== undefined
+      ? String(this.state.formData[paramName])
+      : (QueryParamHelper.getDecodedTextFromQuery(paramName) ?? '');
+
     return new ElixFormsElement(
-      <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
-      <FluentUI.TextField id={paramName} name={paramName} defaultValue={textValue} type="number" required={required} className='isiportalPartialAdminFormFieldSingleLineText'
-        onChange={(event, value) => {
-          this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
-            console.log(`NumberInput ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
-          );
+      <label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
+      <input
+        id={paramName}
+        name={paramName}
+        className="form-control"
+        type="number"
+        required={required}
+        value={currentValue}
+        onChange={(event) => {
+          this.setState({ formData: { ...this.state.formData, [paramName]: event.target.value } });
         }}
       />
     ).render();
@@ -400,72 +389,55 @@ export default abstract class ElixFormsComponentAbstract extends Component<IElix
   private createDropdownInput(paramName: string, label: string, values: Array<ElixFormsDropdownOption>, required: boolean = false): JSX.Element {
     const queryValue = QueryParamHelper.getOptionFromQuery(paramName);
     const currentValue = this.state.formData[paramName] !== undefined
-      ? this.state.formData[paramName]
+      ? String(this.state.formData[paramName])
       : (queryValue?.toString() ?? '');
 
-    const options: FluentUI.IDropdownOption[] = [];
-
-    values.forEach(entry => {
-      options.push(
-        {
-          key: entry.value.toString(),
-          text: entry.label
-        }
-      );
-    });
-
     return new ElixFormsElement(
-      <FluentUI.Label htmlFor={paramName}>{label}</FluentUI.Label>,
-      <>
-        <FluentUI.Dropdown
-          id={paramName}
-          options={options}
-          selectedKey={currentValue}
-          placeholder='---'
-          required={required}
-          className='isiportalPartialAdminFormFieldSelect'
-          onChange={(event, option) => {
-            if (option) {
-              const value = option.key.toString();
-              this.setState({ formData: { ...this.state.formData, [paramName]: value } }, () =>
-                console.log(`Dropdown ${paramName} changed to ${value}. Current value for ${paramName}: ${this.state.formData[paramName]}`)
-              );
-            }
-          }}
-        />
-        <input type="hidden" name={paramName} id={paramName + '_hidden'} value={currentValue} />
-      </>
+      <label className="form-label fw-semibold" htmlFor={paramName}>{label}</label>,
+      <select
+        id={paramName}
+        name={paramName}
+        className="form-select"
+        required={required}
+        value={currentValue}
+        onChange={(event) => {
+          this.setState({ formData: { ...this.state.formData, [paramName]: event.target.value } });
+        }}
+      >
+        <option value="">Seleziona...</option>
+        {values.map(entry => (
+          <option key={entry.value} value={entry.value}>{entry.label}</option>
+        ))}
+      </select>
     ).render();
   }
 
   private renderField(field: any): JSX.Element {
-    //const value = this.state.formData[field.key] || "";
-
     switch (field.type) {
-      case "text":
+      case 'text':
         return this.createTextInput(field.key, field.label, field.required ?? false);
 
-      case "textarea":
+      case 'textarea':
         return this.createTextAreaInput(field.key, field.label, field.required ?? false);
 
-      case "radio":
+      case 'radio':
         return this.createRadioInput(field.key, field.label,
-          new Array<ElixFormsRadioOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
+          field.options.map((o: any) => ({ value: o.value, label: o.label })),
           field.required ?? false);
 
-      case "boolean":
+      case 'boolean':
         return this.createBooleanInput(field.key, field.label, field.required ?? false);
 
-      case "checkbox":
+      case 'checkbox':
         return this.createCheckboxInput(field.key, field.label,
-          new Array<ElixFormsCheckboxOption>().concat(...field.options.map((o: any) => [[o.value, o.label, o.required ?? false]])));
+          field.options.map((o: any) => ({ value: o.value, label: o.label, required: o.required ?? false })));
 
-      case "number":
+      case 'number':
         return this.createNumberInput(field.key, field.label, field.required ?? false);
 
-      case "dropdown":
+      case 'dropdown':
         return this.createDropdownInput(field.key, field.label,
-          new Array<ElixFormsDropdownOption>().concat(...field.options.map((o: any) => [[o.value, o.label]])),
+          field.options.map((o: any) => ({ value: o.value, label: o.label })),
           field.required ?? false);
 
       default:

react/common/src/ElixFormsElement.tsx

@@ -1,14 +1,13 @@
-import React, { type JSX } from "react";
+import React, { type JSX } from 'react';
 
-// Class to encapsulate the label and input elements
 export class ElixFormsElement {
     label: JSX.Element;
     input: JSX.Element;
     separator: string;
-    constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = "")
-    {
+
+    constructor(labelElement: React.ReactElement, inputElement: React.ReactElement, separator: string = '') {
         if (!labelElement || !inputElement) {
-            throw new Error("labelElement and inputElement are required.");
+            throw new Error('labelElement and inputElement are required.');
         }
 
         this.label = labelElement;
@@ -16,15 +15,30 @@ export class ElixFormsElement {
         this.separator = separator;
     }
 
-    // Optional: render both elements together
-    render() : JSX.Element {
-        return (<><div className="iuFieldContainer">
-                <div className="attrDisplay_left attrDisplay_label"><div className="iuLabelContainer"><div className="attrDisplay_center"><div className="attrDisplay_middle">
-                    {this.label}{this.separator}
-                </div></div><div className="iuClearContainer">&nbsp;</div></div></div>
-                <div className="attrDisplay_right attrDisplay_input"><div className="iuInputContainer iuTypeString"><div className="attrDisplay_center"><div className="attrDisplay_middle">
-                    {this.input}
-                </div></div><div className="iuClearContainer">&nbsp;</div></div></div>
-        </div></>);
+    render(): JSX.Element {
+        return (
+            <div className="iuFieldContainer form-group row mb-3 align-items-start">
+                <div className="attrDisplay_left attrDisplay_label col-sm-4">
+                    <div className="iuLabelContainer">
+                        <div className="attrDisplay_center">
+                            <div className="attrDisplay_middle">
+                                {this.label}{this.separator}
+                            </div>
+                        </div>
+                        <div className="iuClearContainer">&nbsp;</div>
+                    </div>
+                </div>
+                <div className="attrDisplay_right attrDisplay_input col-sm-8">
+                    <div className="iuInputContainer iuTypeString">
+                        <div className="attrDisplay_center">
+                            <div className="attrDisplay_middle">
+                                {this.input}
+                            </div>
+                        </div>
+                        <div className="iuClearContainer">&nbsp;</div>
+                    </div>
+                </div>
+            </div>
+        );
     }
 }