ColumnLayout: Added Main Content Scrollbar

Author: MenamAfzal

client/packages/lowcoder/src/comps/comps/columnLayout/columnLayout.tsx

@@ -17,7 +17,7 @@ import { sameTypeMap, UICompBuilder, withDefault } from "comps/generators";
 import { addMapChildAction } from "comps/generators/sameTypeMap";
 import { NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { NameGenerator } from "comps/utils";
-import { Section, controlItem, sectionNames } from "lowcoder-design";
+import { ScrollBar, Section, controlItem, sectionNames } from "lowcoder-design";
 import { HintPlaceHolder } from "lowcoder-design";
 import _ from "lodash";
 import styled from "styled-components";
@@ -96,6 +96,7 @@ const childrenMap = {
   templateRows: withDefault(StringControl, "1fr"),
   rowGap: withDefault(StringControl, "20px"),
   templateColumns: withDefault(StringControl, "1fr 1fr"),
+  mainScrollbar: withDefault(BoolControl, false),
   columnGap: withDefault(StringControl, "20px"),
   style: styleControl(ContainerStyle, 'style'),
   columnStyle: styleControl(ResponsiveLayoutColStyle , 'columnStyle')
@@ -133,48 +134,53 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
     columnGap,
     columnStyle,
     horizontalGridCells,
+    mainScrollbar
   } = props;
 
   return (
     <BackgroundColorContext.Provider value={props.style.background}>
       <DisabledContext.Provider value={props.disabled}>
-        <ContainWrapper $style={{
-          ...props.style,
-          display: "grid",
-          gridTemplateColumns: templateColumns,
-          columnGap,
-          gridTemplateRows: templateRows,
-          rowGap,
-        }}>
-          {columns.map(column => {
-            const id = String(column.id);
-            const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
-            if(!containers[id]) return null
-            const containerProps = containers[id].children;
-            const noOfColumns = columns.length;
-            return (
-              <BackgroundColorContext.Provider value={props.columnStyle.background}>
-                <ColWrapper
-                  key={id}
-                  $style={props.columnStyle}
-                  $minWidth={column.minWidth}
-                  $matchColumnsHeight={matchColumnsHeight}
-                >
-                  <ColumnContainer
-                    layout={containerProps.layout.getView()}
-                    items={gridItemCompToGridItems(containerProps.items.getView())}
-                    horizontalGridCells={horizontalGridCells}
-                    positionParams={containerProps.positionParams.getView()}
-                    dispatch={childDispatch}
-                    autoHeight={props.autoHeight}
-                    style={columnStyle}
-                  />
-                </ColWrapper>
-              </BackgroundColorContext.Provider>
-            )
-            })
-          }
-        </ContainWrapper>
+        <div style={{ height: "inherit", overflow: "auto"}}>
+        <ScrollBar style={{ margin: "0px", padding: "0px" }} overflow="scroll" hideScrollbar={!mainScrollbar}>
+          <ContainWrapper $style={{
+            ...props.style,
+            display: "grid",
+            gridTemplateColumns: templateColumns,
+            columnGap,
+            gridTemplateRows: templateRows,
+            rowGap,
+          }}>
+            {columns.map(column => {
+              const id = String(column.id);
+              const childDispatch = wrapDispatch(wrapDispatch(dispatch, "containers"), id);
+              if(!containers[id]) return null
+              const containerProps = containers[id].children;
+              const noOfColumns = columns.length;
+              return (
+                <BackgroundColorContext.Provider value={props.columnStyle.background}>
+                  <ColWrapper
+                    key={id}
+                    $style={props.columnStyle}
+                    $minWidth={column.minWidth}
+                    $matchColumnsHeight={matchColumnsHeight}
+                  >
+                    <ColumnContainer
+                      layout={containerProps.layout.getView()}
+                      items={gridItemCompToGridItems(containerProps.items.getView())}
+                      horizontalGridCells={horizontalGridCells}
+                      positionParams={containerProps.positionParams.getView()}
+                      dispatch={childDispatch}
+                      autoHeight={props.autoHeight}
+                      style={columnStyle}
+                    />
+                  </ColWrapper>
+                </BackgroundColorContext.Provider>
+              )
+              })
+            }
+          </ContainWrapper>
+        </ScrollBar>
+        </div>
       </DisabledContext.Provider>
     </BackgroundColorContext.Provider>
   );
@@ -207,6 +213,9 @@ export const ResponsiveLayoutBaseComp = (function () {
             <>
             <Section name={sectionNames.layout}>
               {children.autoHeight.getPropertyView()}
+              {(!children.autoHeight.getView()) && children.mainScrollbar.propertyView({
+                label: trans("prop.mainScrollbar")
+              })}
               {children.horizontalGridCells.propertyView({
                 label: trans('prop.horizontalGridCells'),
               })}

client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx

@@ -157,7 +157,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
           }}
         >
       <Wrapper $style={style} $animationStyle={animationStyle}>
-        <Layout style={{padding: "0px", overflow: container.mainScrollbars ? "scroll" : "inherit"}} hasSider={showSider && !container.innerSider}>
+        <Layout style={{padding: "0px", overflow: container.mainScrollbars ? "scroll" : "visible"}} hasSider={showSider && !container.innerSider}>
           {showSider && !container.innerSider && !container.siderRight && (
             <><BackgroundColorContext.Provider value={siderStyle?.siderBackground}>
               <Sider