Vertical Spacing between input elements

General
1

Following is the code to reproduce the issue. I tried to use rowSpacing for Grid but still issue persist.

import React from 'react';
import { materialRenderers, materialCells,  } from '@jsonforms/material-renderers';
import { JsonForms } from '@jsonforms/react';
import { ThemeProvider } from '@emotion/react';
import { createTheme } from '@mui/material';

const data = {
    "input_schema": {
        "type": "object",
        "required": [
            "age"
        ],
        "properties": {
            "firstName": {
                "type": "string",
                "minLength": 2,
                "maxLength": 20
            },
            "lastName": {
                "type": "string",
                "minLength": 5,
                "maxLength": 15
            },
            "age": {
                "type": "integer",
                "minimum": 18,
                "maximum": 100
            },
            "gender": {
                "type": "string",
                "enum": [
                    "Male",
                    "Female",
                    "Undisclosed"
                ]
            },
            "height": {
                "type": "number"
            },
            "dateOfBirth": {
                "type": "string",
                "format": "date"
            },
            "rating": {
                "type": "integer"
            },
            "committer": {
                "type": "boolean"
            },
            "address": {
                "type": "object",
                "properties": {
                    "street": {
                        "type": "string"
                    },
                    "streetnumber": {
                        "type": "string"
                    },
                    "postalCode": {
                        "type": "string"
                    },
                    "city": {
                        "type": "string"
                    }
                }
            }
        }
    },
    "input_ui_schema": {
        "type": "VerticalLayout",
        "elements": [
            {
                "type": "HorizontalLayout",
                "elements": [
                    {
                        "type": "Control",
                        "scope": "#/properties/firstName"
                    },
                    {
                        "type": "Control",
                        "scope": "#/properties/lastName"
                    }
                ]
            },
            {
                "type": "HorizontalLayout",
                "elements": [
                    {
                        "type": "Control",
                        "scope": "#/properties/age"
                    },
                    {
                        "type": "Control",
                        "scope": "#/properties/dateOfBirth"
                    }
                ]
            },
            {
                "type": "HorizontalLayout",
                "elements": [
                    {
                        "type": "Control",
                        "scope": "#/properties/height"
                    },
                    {
                        "type": "Control",
                        "scope": "#/properties/gender"
                    },
                    {
                        "type": "Control",
                        "scope": "#/properties/committer"
                    }
                ]
            },
            {
                "type": "Group",
                "label": "Address for Shipping T-Shirt",
                "elements": [
                    {
                        "type": "HorizontalLayout",
                        "elements": [
                            {
                                "type": "Control",
                                "scope": "#/properties/address/properties/street"
                            },
                            {
                                "type": "Control",
                                "scope": "#/properties/address/properties/streetnumber"
                            }
                        ]
                    },
                    {
                        "type": "HorizontalLayout",
                        "elements": [
                            {
                                "type": "Control",
                                "scope": "#/properties/address/properties/postalCode"
                            },
                            {
                                "type": "Control",
                                "scope": "#/properties/address/properties/city"
                            }
                        ]
                    }
                ],
                "rule": {
                    "effect": "ENABLE",
                    "condition": {
                        "scope": "#/properties/committer",
                        "schema": {
                            "const": true
                        }
                    }
                }
            }
        ]
    }
}
const theme = createTheme({
    components:{
        MuiGrid:{
            defaultProps: {
                rowSpacing:64
            }
        }
    }
});
function Sample() {
    return (
        <ThemeProvider theme={theme}>
            <JsonForms
                schema={data.input_schema}
                uischema={data.input_ui_schema}
                renderers={materialRenderers}
                cells={materialCells}
            />
        </ThemeProvider>
    );
}

export default Sample;

image
image1912×544 19.7 KB

2

Hi @sc231997,

When you are using createTheme of @mui/material, then you also need to use the ThemeProvider of @mui/material, i.e.

import { createTheme, ThemeProvider } from '@mui/material';
1 Like