rjsf-team / react-jsonschema-form

A React component for building Web forms from JSON Schema.
https://rjsf-team.github.io/react-jsonschema-form/
Apache License 2.0
14.3k stars 2.19k forks source link

[material-ui] Multi-column support #2108

Open black-window opened 4 years ago

black-window commented 4 years ago

Prerequisites

Description

It seems that there is no possibility to create a multi column form with material ui. E.g. i want a login a username and password field staying next to each other. The default is that the input fields are generated at the bottom.

What i want to achieve is this: [username] [password] [login button]

but it is [username] [password] [login button]

Version

"@rjsf/core": "^2.4.0",
"@rjsf/material-ui": "^2.4.0",

I love this project. Hope this is possible.

black-window commented 4 years ago

I saw that the ObjectFieldTemplate seems to be a hacky solution. Is there an api such as: const uiSchema = { "email": { "ui:widget": "email", 'ui:column': 'xs6' }, "password": { "ui:widget": "password", 'ui:column': 'xs6' } };

which also works with material ui? This kind of solution would be the best in my eyes.

black-window commented 4 years ago

My solution: https://stackoverflow.com/questions/64529750/multi-column-support-for-react-jsonschema-form/64545562#64545562

But this is not per field. Perhaps you guys can implement a more individual solution like this approach with ui:column

ronnyek commented 3 years ago

One way I've seen something like this implemented in other libraries and other frameworks, is just have the idea of sub groups... and maybe the templates can do things like say I want to display a row for a users name... I could have a form group of fullUserName have that group have a layout property that could be something simple like flex where the form control wrappers flex 1. Seems like you could probably keep things generic by just allowing a group to have a style associated with it, and a style that gets applied to items within that group.

I would think this would allow you to be really flexible in how you render, and probably support most of the ui frameworks relatively well out of box

mikezerosix commented 2 years ago

There is a simple solution for this in pull request : https://github.com/rjsf-team/react-jsonschema-form/pull/2597