JSONSchemaForm Text Area Height

App Building
1

Goal:

Configure the height of ui:widget:'textarea'

Steps:

Add component JSONSchemaForm,
Create a field called notes

JSON Schema

{
  "type": "object",
  "properties": {
    "notes": {
      "type": "string",
      "title": "Notes",
    }
  }
}

UI Schema

{
  "notes": {
    "ui:options": {
      "widget": "textarea",
      "rows": 5,
    },
  },
}

Observation: The notes field has the textarea handle on the bottom right corner, but the height is ignored.

Details:

Textarea row height does not appear to be honored.
The documentation suggests that this is possible.

image
image1007Ă—444 44.9 KB

  • Screenshots:

image
image1307Ă—363 27.2 KB

2

Thanks for reaching out! I'm seeing the same issue :disappointed: I don't have a timeline for this one, but I'll reach out here when our team is able to ship a fix

3

Hey @Tess -- slightly different question, but is it possible to set or get the height of the JSON schema form component?

Doesn't seem like there's a way to get it to fully expand its height, which means the form is always scrolled.

4

Auto height for the JSON schema form is a feature request that we haven't been able to prioritize yet :disappointed: I'm not aware of any workarounds to manually setting the fixed height

1 Like
5

Got it! Thank you.

I wasn’t able to get it to work on its own, but when placed within a stack, this CSS should work:

/* For the JSON Schema Form component (not the Retool native form)*/
/* Ensure the form expands to fit its contents */
[class*=“JSONSchemaFormWidget”] {
    flex: 0 0 auto;
}

/* If the parent container doesn't scroll*/
/* Fix overflow scroll issue */
[data-testid*="ContainerWidget_YourContainerName"] > section, [data-testid*="ContainerWidget_YourContainerName"] > section > div {
  overflow-y: scroll !important;
}

/*  */
/*  */
/*  */
/* If you're using the native Retool form... */

/* Ensure the form fits its contents */
[class*="_retool-FormWidget"] form {
  height: auto !important;
}

/* This is weird and different from JSON schema form */
[data-testid*="RetoolWidget:FormWidget2"] > div > div > div {
  flex: 0 0 auto !important;
}
1 Like