From 6333f3ef7bb8430cf1518c83e6dcb2be52fe22a9 Mon Sep 17 00:00:00 2001
From: Florian Gareis <mail@zoker.me>
Date: Tue, 11 May 2021 17:49:25 +0200
Subject: [PATCH] Fix jumping form by setting min-height to error element

---
 src/App.tsx | 30 +++++++++++++++++++++---------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index ddfc34d..fc85286 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -13,7 +13,7 @@ import {
 } from '@jsonforms/material-renderers';
 import RatingControl from './RatingControl';
 import ratingControlTester from './ratingControlTester';
-import { makeStyles } from '@material-ui/core/styles';
+import { createMuiTheme, makeStyles, ThemeProvider } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((_theme) => ({
   container: {
@@ -41,6 +41,16 @@ const useStyles = makeStyles((_theme) => ({
   },
 }));
 
+const theme = createMuiTheme({
+  overrides: {
+    MuiFormHelperText: {
+      root: {
+        minHeight: '1.6em'
+      }
+    }
+  }
+});
+
 const initialData = {
   name: 'Send email to Adrian',
   description: 'Confirm if you have passed the subject\nHereby ...',
@@ -105,14 +115,16 @@ const App = () => {
             Rendered form
           </Typography>
           <div className={classes.demoform}>
-            <JsonForms
-              schema={schema}
-              uischema={uischema}
-              data={jsonformsData}
-              renderers={renderers}
-              cells={materialCells}
-              onChange={({ errors, data }) => setJsonformsData(data)}
-            />
+            <ThemeProvider theme={theme}>
+              <JsonForms
+                schema={schema}
+                uischema={uischema}
+                data={jsonformsData}
+                renderers={renderers}
+                cells={materialCells}
+                onChange={({ errors, data }) => setJsonformsData(data)}
+              />
+            </ThemeProvider>
           </div>
         </Grid>
       </Grid>