wrap field template so we can style with margin bottom

This commit is contained in:
burnettk 2023-01-30 12:37:08 -05:00
parent a35a177bd1
commit 142664479b
2 changed files with 28 additions and 29 deletions

View File

@ -34,6 +34,7 @@ function FieldTemplate({
return <div style={{ display: 'none' }}>{children}</div>; return <div style={{ display: 'none' }}>{children}</div>;
} }
return ( return (
<div className="rjsf-field">
<WrapIfAdditionalTemplate <WrapIfAdditionalTemplate
classNames={classNames} classNames={classNames}
disabled={disabled} disabled={disabled}
@ -58,6 +59,7 @@ function FieldTemplate({
{help} {help}
</FormControl> </FormControl>
</WrapIfAdditionalTemplate> </WrapIfAdditionalTemplate>
</div>
); );
} }

View File

@ -1,7 +1,3 @@
button.react-json-schema-form-submit-button {
margin-top: 1.5em;
}
.rjsf .header { .rjsf .header {
font-weight: 400; font-weight: 400;
font-size: 20px; font-size: 20px;
@ -17,6 +13,7 @@ button.react-json-schema-form-submit-button {
margin-bottom: 1em; margin-bottom: 1em;
} }
.rjsf .input { /* for some reason it wraps the entire form using FieldTemplate.jsx, which is where we added the rjsf-field thing (which is only intended for fields, not entire forms. hence the double rjsf-field reference, only for rjsf-fields inside rjsf-fields, so we don't get double margin after the last field */
.rjsf .rjsf-field .rjsf-field {
margin-bottom: 2em; margin-bottom: 2em;
} }