Nonscrolling action buttons for long forms (#437)

* nonscroll action bar for long forms

* changes from PR comments

* fix border
This commit is contained in:
mfrances17 2021-03-16 08:35:45 -04:00 committed by GitHub
parent 96d89ab72e
commit 518b21c6ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 3 deletions

View file

@ -7,4 +7,16 @@
.keycloak__form { .keycloak__form {
max-width: 1024px; max-width: 1024px;
} }
.keycloak__form_actions {
position: fixed;
bottom: 0px;
background-color: var(--pf-c-page__main-section--m-light--BackgroundColor);
padding-top: var(--pf-global--spacer--md);
padding-bottom: var(--pf-global--spacer--sm);
padding-left: var(--pf-global--spacer--md);
width: 100%;
border-top: 1px solid var(--pf-global--BorderColor--100);
margin-left: calc(-1 * var(--pf-global--spacer--lg));
}

View file

@ -143,7 +143,7 @@ export const ClientSettings = ({ save }: ClientSettingsProps) => {
ref={register} ref={register}
/> />
</FormGroup> </FormGroup>
<ActionGroup> <ActionGroup className="keycloak__form_actions">
<Button variant="primary" onClick={save}> <Button variant="primary" onClick={save}>
{t("common:save")} {t("common:save")}
</Button> </Button>

View file

@ -296,7 +296,7 @@ export const UserFederationLdapSettings = () => {
<LdapSettingsAdvanced form={form} /> <LdapSettingsAdvanced form={form} />
</ScrollForm> </ScrollForm>
<Form onSubmit={form.handleSubmit(save)}> <Form onSubmit={form.handleSubmit(save)}>
<ActionGroup> <ActionGroup className="keycloak__form_actions">
<Button <Button
isDisabled={!form.formState.isDirty} isDisabled={!form.formState.isDirty}
variant="primary" variant="primary"