diff --git a/src/components/SQFormDialog/SQFormDialogInner.js b/src/components/SQFormDialog/SQFormDialogInner.js
index 02227327..b6c06d9a 100644
--- a/src/components/SQFormDialog/SQFormDialogInner.js
+++ b/src/components/SQFormDialog/SQFormDialogInner.js
@@ -10,6 +10,7 @@ import {
Slide,
makeStyles
} from '@material-ui/core';
+import {useTheme} from '@material-ui/core/styles';
import {Form} from 'formik';
import {RoundedButton, DialogAlert, useDialog} from 'scplus-shared-components';
import {useSQFormContext} from '../../index';
@@ -19,12 +20,28 @@ const Transition = React.forwardRef((props, ref) => {
return ;
});
+const stickyStyles = {
+ position: 'sticky',
+ background: ({palette}) => palette.background.paper,
+ zIndex: 1
+};
+
+const useTitleStyles = makeStyles({
+ root: {
+ ...stickyStyles,
+ top: 0,
+ borderBottom: ({palette}) => `1px solid ${palette.divider}`
+ }
+});
const useActionsStyles = makeStyles({
root: {
display: 'flex',
justifyContent: 'space-between',
flex: '1 1 100%',
- padding: '16px 24px'
+ padding: '16px 24px',
+ ...stickyStyles,
+ bottom: 0,
+ borderTop: ({palette}) => `1px solid ${palette.divider}`
}
});
@@ -42,7 +59,9 @@ function SQFormDialogInner({
title,
muiGridProps
}) {
- const actionsClasses = useActionsStyles();
+ const theme = useTheme();
+ const titleClasses = useTitleStyles(theme);
+ const actionsClasses = useActionsStyles(theme);
const {resetForm, dirty: isDirty} = useSQFormContext();
const [
@@ -74,10 +93,10 @@ function SQFormDialogInner({
onClose={handleCancel}
>