OpenConceptLab/ocl_issues#1348 | fixing margins and scrolls

OpenConceptLab · Sep 13, 2022 · 72117bd · 72117bd
1 parent 87d981e
commit 72117bd
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/src/components/collections/CollectionForm.jsx b/src/components/collections/CollectionForm.jsx
@@ -228,17 +228,19 @@ class CollectionForm extends React.Component {
     const { edit, owner, collection } = this.props
     return (
       <form>
-        <div className='col-xs-12' style={{marginBottom: '30px'}}>
+        <div className='col-xs-12 no-side-padding' style={{marginBottom: '30px', overflowX: 'hidden'}}>
           <FormHeader {...CONFIG} edit={edit} />
-          <NameAndDescription {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={collection} />
-          <Divider style={{width: '100%'}} />
-          <ConfigurationForm {...CONFIG} edit={edit} owner={owner} types={TYPES} onChange={this.onChange} repo={collection} />
-          <Divider style={{width: '100%'}} />
-          {
-            ((edit && !isEmpty(collection)) || !edit) &&
-              <AdvanceSettings {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={collection} />
-          }
-          <div className='col-xs-12 no-side-padding' style={{position: 'fixed', background: WHITE, bottom: 0, zIndex: 1999}}>
+          <div className='col-xs-12'>
+            <NameAndDescription {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={collection} />
+            <Divider style={{width: '100%'}} />
+            <ConfigurationForm {...CONFIG} edit={edit} owner={owner} types={TYPES} onChange={this.onChange} repo={collection} />
+            <Divider style={{width: '100%'}} />
+            {
+              ((edit && !isEmpty(collection)) || !edit) &&
+                <AdvanceSettings {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={collection} />
+            }
+          </div>
+          <div className='col-xs-12' style={{position: 'fixed', background: WHITE, bottom: 0, zIndex: 1999}}>
             <Button variant='contained' type='submit' onClick={this.onSubmit} style={{margin: '10px 0'}}>
               {edit ? 'Update Collection' : 'Create Collection'}
             </Button>

diff --git a/src/components/common/conceptContainerFormComponents/FormHeader.jsx b/src/components/common/conceptContainerFormComponents/FormHeader.jsx
@@ -5,7 +5,7 @@ import { WHITE } from '../../../common/constants'
 const FormHeader = props => {
   const iconMarginTop = props.resource === 'source' ? '8px' : '20px'
   return (
-    <div className='col-xs-12 no-side-padding' style={{display: 'flex', position: 'fixed', background: WHITE, zIndex: '1999'}}>
+    <div className='col-xs-12' style={{display: 'flex', position: 'fixed', background: WHITE, zIndex: '1999'}}>
       <span style={{display: 'inline-block'}}>
         <DynamicConfigResourceIcon resource={props.resource} enableColor style={{fontSize: '4em', marginTop: iconMarginTop}} />
       </span>

diff --git a/src/components/sources/SourceForm.jsx b/src/components/sources/SourceForm.jsx
@@ -271,17 +271,19 @@ class SourceForm extends React.Component {
     const { edit, owner, source } = this.props
     return (
       <form>
-        <div className='col-xs-12' style={{marginBottom: '30px'}}>
+        <div className='col-xs-12 no-side-padding' style={{marginBottom: '30px', overflowX: 'hidden'}}>
           <FormHeader {...CONFIG} edit={edit} />
-          <NameAndDescription {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={source} />
-          <Divider style={{width: '100%'}} />
-          <ConfigurationForm {...CONFIG} edit={edit} owner={owner} types={TYPES} onChange={this.onChange} repo={source} />
-          <Divider style={{width: '100%'}} />
-          {
-            ((edit && !isEmpty(source)) || !edit) &&
-              <AdvanceSettings {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={source} />
-          }
-          <div className='col-xs-12 no-side-padding' style={{position: 'fixed', background: WHITE, bottom: 0, zIndex: 1999}}>
+          <div className='col-xs-12'>
+            <NameAndDescription {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={source} />
+            <Divider style={{width: '100%'}} />
+            <ConfigurationForm {...CONFIG} edit={edit} owner={owner} types={TYPES} onChange={this.onChange} repo={source} />
+            <Divider style={{width: '100%'}} />
+            {
+              ((edit && !isEmpty(source)) || !edit) &&
+                <AdvanceSettings {...CONFIG} edit={edit} owner={owner} onChange={this.onChange} repo={source} />
+            }
+          </div>
+          <div className='col-xs-12' style={{position: 'fixed', background: WHITE, bottom: 0, zIndex: 1999}}>
             <Button variant='contained' type='submit' onClick={this.onSubmit} style={{margin: '10px 0'}}>
               {edit ? 'Update Source' : 'Create Source'}
             </Button>