Просмотр исходного кода

Fix an issue where fields use one column layout

This is reproducible when trying to recreate a migration with OCI as a
source and then zooming out the browser.

This happened because, by default, the size of the browser is taken into
consideration when deciding between 1 or 2 columns.
This works for the wizard options fields, but in this case the max
height of the modal does not depend on the size of the browser.
Sergiu Miclea 7 лет назад
Родитель
Сommit
77c9d4738f

+ 1 - 0
src/components/organisms/EditReplica/EditReplica.jsx

@@ -327,6 +327,7 @@ class EditReplica extends React.Component<Props, State> {
         columnStyle={{ marginRight: 0 }}
         columnStyle={{ marginRight: 0 }}
         fieldWidth={StyleProps.inputSizes.large.width}
         fieldWidth={StyleProps.inputSizes.large.width}
         onScrollableRef={ref => { this.scrollableRef = ref }}
         onScrollableRef={ref => { this.scrollableRef = ref }}
+        availableHeight={384}
       />
       />
     )
     )
   }
   }

+ 4 - 1
src/components/organisms/WizardOptions/WizardOptions.jsx

@@ -87,6 +87,7 @@ type Props = {
   columnStyle?: { [string]: mixed },
   columnStyle?: { [string]: mixed },
   fieldWidth?: number,
   fieldWidth?: number,
   onScrollableRef?: (ref: HTMLElement) => void,
   onScrollableRef?: (ref: HTMLElement) => void,
+  availableHeight?: number,
 }
 }
 @observer
 @observer
 class WizardOptions extends React.Component<Props> {
 class WizardOptions extends React.Component<Props> {
@@ -209,7 +210,9 @@ class WizardOptions extends React.Component<Props> {
       }
       }
     })
     })
 
 
-    if (fields.length * 96 < window.innerHeight - 450) {
+    let availableHeight = this.props.availableHeight || (window.innerHeight - 450)
+
+    if (fields.length * 96 < availableHeight) {
       return (
       return (
         <Fields>
         <Fields>
           <OneColumn>
           <OneColumn>