How to resize Edit Record form & Modal Width

Ask the community
,
1

Is there a way to resize the native “edit record” modal and form? I have some rich text fields and the form and modal window is a bit narrow for this type of field.

Often times folks want to create formatted bulleted lists and paragraphs, which get sent to Documint to fit into a report, and it’s hard to compose in such a narrow window and field.

2

This worked for me!

Site Settings → Custom Code → Head Code

<style>

/* Increase modal width */
[data-testid="modal-container"] > div {
    width: 90vw !important;
    max-width: 1200px !important;
}

/* Make long text fields larger */
textarea {
    min-height: 350px !important;
    width: 100% !important;
    resize: vertical !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    padding: 16px !important;
}

/* Optional: make the modal body taller */
[data-testid="modal-container"] [role="dialog"] {
    max-height: 90vh !important;
}

/* Optional: improve scrolling inside modal */
[data-testid="modal-container"] .overflow-y-auto {
    overflow-y: auto !important;
}

</style>
3

Thanks for the workaround @Eymeric !

4

Jumping in on this older post because I’m curious if anyone’s tried tweaking other elements in the Softr forms using CSS. Has there been any update or new functionality in Softr since this was last discussed that addresses modal resizing or form handling? It would be great to hear how these changes are holding up for everyone or if you’ve discovered new tips!