Aligment Issue in Designer and Viewing(Desiner and View)

[linesh98]

I am using the licensed version of FormBuilder and trying to create a better view. I am hiding the left and right panels to expand the designer area. The layout works correctly in the expanded view, but the alignment breaks in the shrunk (normal) view when the panels are visible again. I am facing alignment issues because the layout changes between the expanded view and the normal designer view. This is also affecting other parts of my application where the same UI behavior is used. How can I fix this issue? Below I will provide my current code and screenshots.

after expaning it like

how to fix this mismatch, because my other page in the application, that is using template breaking the layout, it is using a modal to display the form

belwo i will provid ethe designer and modal using code
`// src/pages/private/form-builder/Designer.tsx

import { useCallback, useEffect, useMemo } from "react";
import { FormBuilder, useFormBuilder, type BuilderView } from "@react-form-builder/designer";

import {
components as rsuiteComponents,
formEngineRsuiteCssLoader,
ltrCssLoader,
rtlCssLoader,
RsLocalizationWrapper,
rSuiteComponentsDescriptions,
} from "@react-form-builder/components-rsuite";
import { rSuiteTableComponentsDescriptions } from "@react-form-builder/components-rsuite-table";

import {
fastQrComponent,
fastQrComponentsDescriptions,
} from "@react-form-builder/components-fast-qr";
import {
googleMapComponent,
googleMapComponentsDescriptions,
} from "@react-form-builder/components-google-map";
import {
richTextComponent,
richTextEditorComponentsDescriptions,
} from "@react-form-builder/components-rich-text";
import {
signatureComponent,
signatureComponentsDescriptions,
} from "@react-form-builder/components-signature";

import { BiDi, BuilderView as CoreBuilderView } from "@react-form-builder/core";

import ButtonComponent from "../../../components/general/ButtonComponent";
import { voiceTextInput } from "./VoiceTextInputDef";
import { textEditor } from "./TextEditorDef";

/* -------------------------------------------------------------------------- /
/ Toggle Builder / Preview Mode Button /
/ -------------------------------------------------------------------------- */

const CustomToggleModeButton = () => {
const builder = useFormBuilder();
const label = builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode";

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";
builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel");
const rightPanel = document.querySelector(".FE_RightPanel");

if (leftPanel && rightPanel) {
  if (newMode === "viewer") {
    leftPanel.classList.add("hidden-panel");
    rightPanel.classList.add("hidden-panel");
  } else {
    leftPanel.classList.remove("hidden-panel");
    rightPanel.classList.remove("hidden-panel");
  }
}

}, [builder]);

return {label};
};

/* -------------------------------------------------------------------------- /
/ Builder Customizations /
/ -------------------------------------------------------------------------- */

const builderCustomizations = {
JsonViewButton: { hidden: true },
MainMenu_Button: { hidden: true },
ResolutionSelect: { hidden: true },
ToggleThemeButton: { hidden: true },
Actions_Tab: { hidden: true },
Actions_Tab_Content: { hidden: true },
LocalizationSelect: { hidden: true },
ToggleModeButton: { hidden: true },
Header_Toolbar: { hidden: true },
MainMenu_Dropdown: {
style: #menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; },
},
Header: {
customRenderer: () => (
<>
<style>
{.hidden-panel { display: none !important; }}
</style>
<div
style={{
display: "flex",
justifyContent: "flex-end",
padding: "0.5rem",
}}
>


</>
),
},
};

/* -------------------------------------------------------------------------- /
/ Props /
/ -------------------------------------------------------------------------- */

interface DesignerProps {
onRefReady: (ref: any) => void;
onDataChange: (data: any) => void;
}

/* -------------------------------------------------------------------------- /
/ Designer Component /
/ -------------------------------------------------------------------------- */

export const Designer = ({ onRefReady, onDataChange }: DesignerProps) => {
/* ------------------------ Register ALL components ------------------------ */

const allComponents = useMemo(
() => [
...rsuiteComponents,
fastQrComponent.build(),
googleMapComponent.build(),
signatureComponent.build(),
richTextComponent.build(),
voiceTextInput.build(),
textEditor.build(),
],
[],
);
useEffect(() => {
if (globalThis.crypto && typeof globalThis.crypto.subtle === "undefined") {
Object.defineProperty(globalThis.crypto, "subtle", {
value: {
verify: async () => true,
importKey: async () => ({}),
},
configurable: true,
});
}
}, []);

/* ------------------------- Create Builder View --------------------------- */

const view = useMemo(() => {
return (
new CoreBuilderView(allComponents)
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)
.withCssLoader("common", formEngineRsuiteCssLoader)

    // Register library descriptions (LEFT PANEL)
    .withComponentLibraryDescription(fastQrComponentsDescriptions)
    .withComponentLibraryDescription(googleMapComponentsDescriptions)
    .withComponentLibraryDescription(richTextEditorComponentsDescriptions)
    .withComponentLibraryDescription(signatureComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteTableComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteComponentsDescriptions)
);

}, [allComponents]);

const licenseKey = import.meta.env.VITE_LICENSE_KEY;

return (
<FormBuilder
licenseKey={licenseKey}
view={view}
customization={builderCustomizations}
builderRef={(ref) => ref && onRefReady(ref)}
onFormDataChange={({ data }) => onDataChange(data)}
/>
);
};
`

and modal using like
`import styled from "styled-components";
import { useEffect, useRef, useState } from "react";
import ViewerPage from "../customform/ViewerPage";
import ButtonComponent from "../../../components/general/ButtonComponent";
import { useGetAllTemplatesFormQuery } from "../../../store/services/DoctorsWorkBenchApis/doctorsWorkbenchApi";
import { LoadForm } from "../customform/LoadForm";
import { IMAGE_ROOT_PATH_URL } from "../../../utils/general/constants";
import SavedFormExpandModal from "../../../components/modals/doctors-workbench/clinical-forms/SavedFormExpandModal";
import { useGetScopeForPermissionsQuery } from "../../../store/services/administration/AdministrationApi";
import { ScopePermissionsConstants } from "../../../utils/administration/adminConstants";
import { scopeFinder } from "../../../utils/administration/scopeFinder";

const SavedFormsStructure = () => {
const viewerRef = useRef<{ handleSave: () => void } | null>(null);

const [formList, setFormList] = useState<{ id: number; name: string }[]>([]);
const [selectedForm, setSelectedForm] = useState<number | null>(null);
const [alreadyFilled, setAlreadyFilled] = useState(false);
const [isDirty, setIsDirty] = useState(false);
// const [isModalOpen, setIsModalOpen] = useState(false);
// const [refreshKey, setRefreshKey] = useState(0);
const [isExpanded, setIsExpanded] = useState(false);

const { data: templates } = useGetAllTemplatesFormQuery({
isAdvanceSearch: false,
pageSize: 1000,
pageCount: 1,
timePeriodFilterType: 0,
isDirectSearch: false,
directSearch: [],
advanceSearch: [],
userId: parseInt(localStorage.getItem("userId") ?? "0") ?? 0,
});

useEffect(() => {
if (templates?.data?.templateList?.length) {
setFormList(templates.data.templateList.map(({ id, name }) => ({ id, name })));
}
}, [templates]);
const { data: scopes } = useGetScopeForPermissionsQuery([
ScopePermissionsConstants.DWB_OutPatient_ClinicalForms,
]);
const ClinicalFormsTabPermissions = scopeFinder(
scopes,
ScopePermissionsConstants.DWB_OutPatient_ClinicalForms,
);
return (




<ExpandButton
onClick={() => {
if (selectedForm) {
setIsExpanded(true);
}
}}
>
<img
src={${IMAGE_ROOT_PATH_URL}/EmployeeProfileImages/CTA Buttons_20260212055630316.svg}
/>

    {/* Scrollable Form Area */}
    {!isExpanded && (
      <Content>
        <ViewerPage
          ref={viewerRef}
          selectedForm={selectedForm}
          onStateChange={({ alreadyFilled, isDirty }) => {
            setAlreadyFilled(alreadyFilled);
            setIsDirty(isDirty);
          }}
        />
      </Content>
    )}

    {/* Bottom Save */}
    <Footer>
      {ClinicalFormsTabPermissions.create && (
        <ButtonComponent
          onClick={() => viewerRef.current?.handleSave()}
          disabled={!selectedForm || alreadyFilled || !isDirty}
        >
          Save Form
        </ButtonComponent>
      )}
    </Footer>
    <SavedFormExpandModal isOpen={isExpanded} setOpen={() => setIsExpanded(false)}>
      <div className="form-scroll">
        <ViewerPage
          ref={viewerRef}
          selectedForm={selectedForm}
          onStateChange={({ alreadyFilled, isDirty }) => {
            setAlreadyFilled(alreadyFilled);
            setIsDirty(isDirty);
          }}
          onSaveSuccess={() => {
            setIsExpanded(false);
          }}
        />
      </div>

      <div className="modal-footer">
        <ButtonComponent
          onClick={() => viewerRef.current?.handleSave()}
          disabled={!selectedForm || alreadyFilled || !isDirty}
        >
          Save Form
        </ButtonComponent>
      </div>
    </SavedFormExpandModal>
  </Container>
</Wrapper>

);
};

export default SavedFormsStructure;
const Wrapper = styled.divwidth: 100%; height: calc(100vh - 19rem); padding: 0.75rem 1rem; box-sizing: border-box;;

const Container = styled.divheight: 100%; display: flex; flex-direction: column; background: #fff; border: 1px solid #e5e5e5; border-radius: 6px; overflow: hidden;;

const TopBar = styled.divflex-shrink: 0; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eee; background: #fafafa;;

const ExpandButton = styled.button`
border: none;
background: transparent;
cursor: pointer;
font-size: 18px;
color: #666;

&:hover {
color: #000;
}
`;

const Content = styled.divflex: 1; overflow-y: auto; padding: 16px;;

const Footer = styled.divflex-shrink: 0; padding: 12px 16px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; background: #fff;;
`

and
`import { useEffect, useRef, useState } from "react";
import { CustomizationMap, FormBuilder, type IFormBuilder } from "@react-form-builder/designer";
import { builderViewWithCss } from "@react-form-builder/components-rsuite";
import { toast } from "react-toastify";
import { useParams } from "react-router-dom";

import { voiceTextInput } from "./VoiceTextInputDef";
import type { BuilderView } from "@react-form-builder/designer";
import { useMemo } from "react";
import { textEditor } from "./TextEditorDef";
import {
useLazyGetTemplateByIdFormQuery,
useLazyGetAllFormEntriesQuery,
useSaveFormEntryMutation,
} from "../../../store/services/DoctorsWorkBenchApis/doctorsWorkbenchApi";

import { IFormViewer } from "@react-form-builder/core";
import { forwardRef, useImperativeHandle } from "react";

import styled from "styled-components";
import { IMAGE_ROOT_PATH_URL } from "../../../utils/general/constants";
import { ensureCryptoSubtle } from "../../../utils/doctors-workbench/cryptoFix";
import { getDisableConsultationEdit } from "../../../store/features/doctors-workbench/consultations/VitalSignsSlice";
import { useAppSelector } from "../../../store/hooks";

interface ViewerPageProps {
selectedForm: number | null;
onStateChange: (state: { alreadyFilled: boolean; isDirty: boolean }) => void;
onSaveSuccess?: () => void;
}

const ViewerPage = forwardRef<{ handleSave: () => void }, ViewerPageProps>(
({ selectedForm, onStateChange, onSaveSuccess }, ref) => {
const builderRef = useRef<IFormBuilder | null>(null);
const viewerRef = useRef<IFormViewer | null>(null);
const disableModify = useAppSelector(getDisableConsultationEdit);

const [formSchema, setFormSchema] = useState<any | null>(null);
const [formData, setFormData] = useState<Record<string, any>>({});
const [initialFormData, setInitialFormData] = useState<Record<string, any>>({});
const [shouldParseForm, setShouldParseForm] = useState(false);
const [alreadyFilled, setAlreadyFilled] = useState(false);
const [isDirty, setIsDirty] = useState(false);

const { encounterId } = useParams<{ encounterId: string }>();

const [getTemplateById] = useLazyGetTemplateByIdFormQuery();
const [getAllFormEntries] = useLazyGetAllFormEntriesQuery();
const [saveFormEntry] = useSaveFormEntryMutation();
useEffect(() => {
  onStateChange({ alreadyFilled, isDirty });
}, [alreadyFilled, isDirty]);

// Load template and form data if filled
useEffect(() => {
  const loadTemplate = async () => {
    if (!selectedForm) return;

    try {
      const tpl = await getTemplateById(selectedForm).unwrap();
      const parsedSchema =
        typeof tpl.schemaJson === "string" ? JSON.parse(tpl.schemaJson) : tpl.schemaJson;

      setFormSchema(parsedSchema);
      setShouldParseForm(true);

      if (!encounterId) {
        toast.warn("No encounter ID provided.");
        setFormData({});
        setInitialFormData({});
        setAlreadyFilled(false);
        return;
      }

      const entries = await getAllFormEntries({
        isAdvanceSearch: false,
        pageSize: 1000,
        pageCount: 1,
        timePeriodFilterType: 0,
        isDirectSearch: false,
        directSearch: [],
        advanceSearch: [],
        userId: parseInt(localStorage.getItem("userId") ?? "0") ?? 0,
      }).unwrap();
      // console.log(selectedForm);

      const existingEntry = entries.data.templateRecordList.find(
        (entry) =>
          entry.templateId === selectedForm && entry.encounterId === Number(encounterId),
      );
      // console.log(existingEntry, "aggh");

      if (existingEntry) {
        // console.log("ALREADY FILLED DETECTED");
        let parsedData = {};
        try {
          parsedData =
            typeof existingEntry.dataJson === "string"
              ? JSON.parse(existingEntry.dataJson)
              : existingEntry.dataJson;
        } catch {
          toast.error("Invalid form data format.");
        }

        setFormData(parsedData);
        setInitialFormData(parsedData);
        setAlreadyFilled(true);

        // toast.info("Form already filled for this visit.");
      } else {
        setFormData({});
        setInitialFormData({});
        setAlreadyFilled(false);
      }
    } catch (error) {
      toast.error("Error loading form.");
    }
  };

  loadTemplate();
}, [selectedForm, encounterId]);

// Parse schema into form builder
useEffect(() => {
  if (shouldParseForm && builderRef.current && formSchema) {
    try {
      builderRef.current.parseForm(JSON.stringify(formSchema));
      setShouldParseForm(false);
    } catch (error) {
      toast.error("Error parsing form.");
    }
  }
}, [shouldParseForm, formSchema]);
useEffect(() => {
  ensureCryptoSubtle();
}, []);
// Save filled form
const handleSave = async () => {
  if (!selectedForm || !encounterId) {
    toast.warn("Select a form and ensure encounter ID is set.");
    return;
  }

  if (alreadyFilled) {
    toast.warn("Form already submitted for this visit.");
    return;
  }

  //  Run form validation using IFormViewer -> IFormData.validate()
  if (viewerRef.current && viewerRef.current.formData) {
    const validationResult = await viewerRef.current.formData.validate();

    // validationResult can be: string[] | Record<string, string> | undefined
    const hasErrors = Array.isArray(validationResult)
      ? validationResult.length > 0
      : validationResult && Object.keys(validationResult).length > 0;

    if (hasErrors) {
      toast.error("Please fix form validation errors before saving.");
      return;
    }
  }

  try {
    await saveFormEntry({
      templateId: selectedForm,
      dataJson: JSON.stringify(formData),
      encounterId: Number(encounterId),
    }).unwrap();

    toast.success("Form saved for this visit.");
    setAlreadyFilled(true);
    onSaveSuccess?.();
  } catch (error) {
    toast.error("Could not save entry.");
  }
};

// Hide builder UI elements
const builderCustomizations: CustomizationMap = {
  JsonViewButton: { hidden: true },
  MainMenu_Button: { hidden: true },
  ResolutionSelect: { hidden: true },
  ToggleThemeButton: { hidden: true },
  Actions_Tab: { hidden: true },
  Actions_Tab_Content: { hidden: true },
  LocalizationSelect: { hidden: true },
  ToggleModeButton: { hidden: true },
  Header_Toolbar: { hidden: true },
  LeftPanel: { hidden: true },
  RightPanel: { hidden: true },
  MainMenu_Dropdown: {
    style: `#menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; }`,
  },
  // Header: {
  //   customRenderer: () => null,
  // },
};
const extendedView: BuilderView = useMemo(() => {
  const baseComponents = builderViewWithCss.builderComponents ?? [];
  const allComponents = [...baseComponents, voiceTextInput.build(), textEditor.build()];

  const ViewConstructor = builderViewWithCss.constructor as any;
  return new ViewConstructor(allComponents);
}, []);

// const { data: scopes } = useGetScopeForPermissionsQuery([
//   ScopePermissionsConstants.DWB_OutPatient_ClinicalForms,
// ]);
// const ClinicalFormsTabPermissions = scopeFinder(
//   scopes,
//   ScopePermissionsConstants.DWB_OutPatient_ClinicalForms,
// );
const licenseKey = import.meta.env.VITE_LICENSE_KEY;
useImperativeHandle(ref, () => ({
  handleSave,
}));

return (
  <div style={{ padding: "1rem" }}>
    {!selectedForm && (
      <NoDataWrapper>
        <NoDataContent>
          <img
            src={`${IMAGE_ROOT_PATH_URL}/EmployeeProfileImages/No Data Animation (1) 1_20260211103005828.svg`}
          />
          <p>No data!</p>
          {/* <span>Select a form to begin</span> */}
        </NoDataContent>
      </NoDataWrapper>
    )}
    {selectedForm && (
      <>
        {alreadyFilled && (
          <InfoBanner>
            This form was already submitted for this visit and is read-only.
          </InfoBanner>
        )}
        <FormBuilder
          licenseKey={licenseKey}
          view={extendedView}
          builderRef={(ref) => {
            if (ref) {
              builderRef.current = ref;
              builderRef.current.builderMode = "viewer";
            }
          }}
          viewerRef={(ref) => {
            if (ref) viewerRef.current = ref;
          }}
          initialData={initialFormData}
          readOnly={alreadyFilled || disableModify}
          disabled={alreadyFilled || disableModify}
          onFormDataChange={({ data }) => {
            setFormData(data);

            // Check if any field has value
            const hasValue = Object.values(data).some(
              (value) =>
                value !== null &&
                value !== undefined &&
                value !== "" &&
                !(Array.isArray(value) && value.length === 0),
            );

            setIsDirty(hasValue);
          }}
          customization={builderCustomizations}
        />
        {/* {ClinicalFormsTabPermissions.create && (
        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "1rem" }}>
          <ButtonComponent onClick={handleSave} disabled={alreadyFilled}>
            Save Form
          </ButtonComponent>
        </div>
      )} */}
      </>
    )}
  </div>
);

},
);

export default ViewerPage;

const NoDataWrapper = styled.divheight: 100%; display: flex; align-items: center; justify-content: center;;

const NoDataContent = styled.div`
text-align: center;
color: #888;
margin-top: 2rem;

p {
/* margin: 8px 0 4px; */
font-weight: 500;
}

span {
font-size: 0.8rem;
}
; const InfoBanner = styled.div
background: #f0f4ff;
color: #2f54eb;
border: 1px solid #d6e4ff;
padding: 8px 12px;
border-radius: 4px;
margin-bottom: 12px;
font-size: 0.875rem;
;
and

`// import styled from "styled-components";
// import ModalWrapper from "../../general/ModalWrapper";
// import ModalFormLayOut from "../../general/ModalFormLayout";

import { styled } from "styled-components";
import ModalFormLayOut from "../../general/ModalFormLayout";
import ModalWrapper from "../../general/ModalWrapper";

// import { useRef, useState } from "react";
// import ViewerPage from "../../../../views/doctors-workbench/customform/ViewerPage";
// import ButtonComponent from "../../../general/ButtonComponent";

// interface SavedFormExpandModalProps {
// isOpen: boolean;
// selectedForm: number | null;
// setOpen: () => void;
// onSaved: () => void;
// }

// const SavedFormExpandModal = ({
// isOpen,
// selectedForm,
// setOpen,
// onSaved,
// }: SavedFormExpandModalProps) => {
// const viewerRef = useRef<{ handleSave: () => void } | null>(null);

// const [alreadyFilled, setAlreadyFilled] = useState(false);
// const [isDirty, setIsDirty] = useState(false);

// if (!isOpen) return null;

// return (
//
//
//
// <ViewerPage
// ref={viewerRef}
// selectedForm={selectedForm}
// showAlreadyFilledToast={false}
// onStateChange={({ alreadyFilled, isDirty }) => {
// setAlreadyFilled(alreadyFilled);
// setIsDirty(isDirty);
// }}
// onSaveSuccess={() => {
// onSaved();
// setOpen();
// }}
// />

//

// <ButtonComponent
// onClick={() => viewerRef.current?.handleSave()}
// disabled={!selectedForm || alreadyFilled || !isDirty}
// >
// Save Form
//
//
//
//
//
// );
// };

// export default SavedFormExpandModal;

// const ModalContent = styled.div`
// display: flex;
// flex-direction: column;
// max-height: 80vh;
// min-height: 60vh;
// max-width: 70vw;

// overflow: hidden;

// > div:first-child {
// flex: 1;
// overflow-y: auto;
// }
// `;

// const Footer = styled.div// padding-top: 1rem; // display: flex; // justify-content: flex-end; //;
interface SavedFormExpandModalProps {
isOpen: boolean;
setOpen: () => void;
children: React.ReactNode;
}

const SavedFormExpandModal = ({ isOpen, setOpen, children }: SavedFormExpandModalProps) => {
if (!isOpen) return null;

return (


{children}


);
};
export default SavedFormExpandModal;
const ViewerModal = styled.div`
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-bottom: 0.5rem;
display: flex;
flex-direction: column;
height: 80vh;
width: 60vw;

.form-scroll {
flex: 1;
overflow-y: auto;
padding-right: 1rem;
}

.modal-footer {
flex-shrink: 0;
padding: 16px;
border-top: 1px solid #eee;
display: flex;
justify-content: flex-end;
background: #fff;
}
;
In the above code, when selecting a form, it is displayed normally in the UI and works correctly without any alignment issues. However, when I use the expanded view (where the form opens in a modal), the layout breaks and the alignment changes. Kindly provide a solution to fix this issue.

[ashalugin]

@linesh98 Could you also attach snapshots of the pages with this problem?

You can take snapshots of pages using this extension: https://chromewebstore.google.com/detail/singlefile/mpiodijhokgodhhofbcjdecpffjipkle?pli=1

[linesh98]

Below I will Provide Designer View, Expanded View (Hide Left & Right Panel) and Modal View, Modal View we are using for Filling and Printing the Form
Hisware (3_6_2026 1：08：09 PM).html
Hisware (3_6_2026 1：07：03 PM).html
Hisware (3_6_2026 1：06：16 PM).html

[linesh98]

please verify the issue, and let me know if any further details or code needed for solving this sissue

[cherepanov]

Hi! I see your table-like layout gets messed up when the container is resized. This happens because you're using RsContainer, which is based on flexbox. Achieving a reliable table-like layout with flexbox can be challenging, there are workarounds available, but they often come with limitations. Things work a bit better with grid, but it still requires significant markup.

Another option is to use display: table, table-row, etc., on containers. Check the attached form for an example:
container-table-layout-form.json

Alternatively, in your case, it might be better to use the RsTable component with custom cell definitions. You can find the documentation here:
https://formengine.io/documentation/formengine-designer/components/table/