Fix jumping form by setting min-height to error element

eclipsesource · May 11, 2021 · 6333f3e · 6333f3e
1 parent eec699f
commit 6333f3e
Showing 1 changed file with 21 additions and 9 deletions.
diff --git 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>