fix: added match columns height switch

raheeliftikhar5 · ludomikula · commit d89704f9beb3 · 2023-08-28T20:45:22.000+02:00
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -42,10 +42,11 @@ const RowWrapper = styled(Row)<{$style: ResponsiveLayoutRowStyleType}>`
 const ColWrapper = styled(Col)<{
   $style: ResponsiveLayoutColStyleType,
   $minWidth?: string,
+  $matchColumnsHeight: boolean,
 }>`
   min-width: ${(props) => props.$minWidth};
   > div {
-    height: 100%;
+    height: ${(props) => props.$matchColumnsHeight ? '100%' : 'auto'};
   }
 `;
 
@@ -58,6 +59,7 @@ const childrenMap = {
   }),
   autoHeight: AutoHeightControl,
   rowBreak: withDefault(BoolControl, false),
+  matchColumnsHeight: withDefault(BoolControl, false),
   rowStyle: withDefault(styleControl(ResponsiveLayoutRowStyle), {}),
   columnStyle: withDefault(styleControl(ResponsiveLayoutColStyle), {}),
   columnPerRowLG: withDefault(NumberControl, 4),
@@ -91,6 +93,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
     containers,
     dispatch,
     rowBreak,
+    matchColumnsHeight,
     rowStyle,
     columnStyle,
     columnPerRowLG,
@@ -135,6 +138,7 @@ const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
                 xs={24/(noOfColumns < columnPerRowSM ? noOfColumns : columnPerRowSM)}
                 $style={columnCustomStyle}
                 $minWidth={column.minWidth}
+                $matchColumnsHeight={matchColumnsHeight}
               >
                 <ColumnContainer
                   layout={containerProps.layout.getView()}
@@ -177,6 +181,9 @@ export const ResponsiveLayoutBaseComp = (function () {
             {children.rowBreak.propertyView({
               label: trans("responsiveLayout.rowBreak")
             })}
+            {children.matchColumnsHeight.propertyView({
+              label: trans("responsiveLayout.matchColumnsHeight")
+            })}
           </Section>
           <Section name={trans("responsiveLayout.columnsPerRow")}>
             {children.columnPerRowLG.propertyView({
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -2523,5 +2523,6 @@ export const en = {
     columnStyle: "Column Style",
     minWidth: "Min. Width",
     rowBreak: "Row Break",
+    matchColumnsHeight: "Match Columns Height",
   },
 };
diff --git a/client/packages/lowcoder/src/i18n/locales/zh.ts b/client/packages/lowcoder/src/i18n/locales/zh.ts
@@ -2513,6 +2513,7 @@ timeLine: {
         columnStyle: "栏目样式",
         minWidth: "分钟。宽度",
         rowBreak: "断行",
+        matchColumnsHeight: "匹配列高度",
     }
 };
 

Original file line number	Diff line number	Diff line change
`@@ -2513,6 +2513,7 @@ timeLine: {`
`2513`	`2513`	`columnStyle: "栏目样式",`
`2514`	`2514`	`minWidth: "分钟。宽度",`
`2515`	`2515`	`rowBreak: "断行",`
	`2516`	`+ matchColumnsHeight: "匹配列高度",`
`2516`	`2517`	`}`
`2517`	`2518`	`};`
`2518`	`2519`