# Vertical Spacing between input elements

**URL:** <https://jsonforms.discourse.group/t/vertical-spacing-between-input-elements/2268>\
**Category:** General\
**Created:** [August 8, 2024, 11:21am UTC](https://jsonforms.discourse.group/t/vertical-spacing-between-input-elements/2268 "2024-08-08T11:21:45Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![sc231997](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sc231997/32/1080_2.png) [@sc231997](https://jsonforms.discourse.group/u/sc231997)\
**Post date:** [August 8, 2024, 11:21am UTC](https://jsonforms.discourse.group/t/vertical-spacing-between-input-elements/2268/1 "2024-08-08T11:21:45Z")

</div>

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

```js
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](https://global.discourse-cdn.com/free1/uploads/jsonforms/original/2X/1/174f2ad7c25f62913d5f74eab64ebd47f215cf94.png)

---

<div class="post-metadata">

**Author:** ![sdirix](https://yyz2.discourse-cdn.com/free1/user_avatar/jsonforms.discourse.group/sdirix/32/1073_2.png) [@sdirix](https://jsonforms.discourse.group/u/sdirix)\
**Post date:** [August 9, 2024, 8:00am UTC](https://jsonforms.discourse.group/t/vertical-spacing-between-input-elements/2268/2 "2024-08-09T08:00:16Z")

</div>

Hi @sc231997,

> [@sc231997](#):
>
> ```auto
> import { ThemeProvider } from '@emotion/react';
> import { createTheme } from '@mui/material';
> 
> ```

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

```typescript
import { createTheme, ThemeProvider } from '@mui/material';

```