diff --git a/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx b/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx index cd29075d160d919cf0a847552e5be2c32db85aba..494160cad8b27a52656995dfd0dd207ef2a81a5c 100644 --- a/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx +++ b/openbis_ng_ui/src/js/components/types/form/TypeFormButtons.jsx @@ -8,8 +8,23 @@ const styles = theme => ({ container: { display: 'flex' }, + leftContainer: { + flexGrow: 1, + display: 'flex', + justifyContent: 'flex-start', + '& $button': { + marginRight: theme.spacing(1) + } + }, + rightContainer: { + flexGrow: 1, + display: 'flex', + justifyContent: 'flex-end', + '& $button': { + marginLeft: theme.spacing(1) + } + }, button: { - marginRight: theme.spacing(1), whiteSpace: 'nowrap' } }) @@ -42,12 +57,14 @@ class TypeFormButtons extends React.PureComponent { return ( <Container className={classes.container}> - <Button - name='edit' - label='Edit' - styles={{ root: classes.button }} - onClick={onEdit} - /> + <div className={classes.rightContainer}> + <Button + name='edit' + label='Edit' + styles={{ root: classes.button }} + onClick={onEdit} + /> + </div> </Container> ) } @@ -64,39 +81,43 @@ class TypeFormButtons extends React.PureComponent { return ( <Container className={classes.container}> - <Button - name='addSection' - label='Add Section' - styles={{ root: classes.button }} - onClick={onAddSection} - /> - <Button - name='addProperty' - label='Add Property' - styles={{ root: classes.button }} - disabled={!this.isSectionOrPropertySelected()} - onClick={onAddProperty} - /> - <Button - name='remove' - label='Remove' - styles={{ root: classes.button }} - disabled={!this.isSectionOrPropertySelected()} - onClick={onRemove} - /> - <Button - name='save' - label='Save' - type='final' - styles={{ root: classes.button }} - onClick={onSave} - /> - <Button - name='cancel' - label='Cancel' - styles={{ root: classes.button }} - onClick={onCancel} - /> + <div className={classes.leftContainer}> + <Button + name='addSection' + label='Add Section' + styles={{ root: classes.button }} + onClick={onAddSection} + /> + <Button + name='addProperty' + label='Add Property' + styles={{ root: classes.button }} + disabled={!this.isSectionOrPropertySelected()} + onClick={onAddProperty} + /> + <Button + name='remove' + label='Remove' + styles={{ root: classes.button }} + disabled={!this.isSectionOrPropertySelected()} + onClick={onRemove} + /> + </div> + <div className={classes.rightContainer}> + <Button + name='save' + label='Save' + type='final' + styles={{ root: classes.button }} + onClick={onSave} + /> + <Button + name='cancel' + label='Cancel' + styles={{ root: classes.button }} + onClick={onCancel} + /> + </div> </Container> ) }