PageLayout: Fixed main content scrollbar

MenamAfzal · MenamAfzal · commit 168efdb1e955 · 2024-09-26T12:20:57.000+05:00
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx
@@ -39,14 +39,18 @@ const getStyle = (style: ContainerStyleType) => {
   `;
 };
 
-const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType }>`
+const Wrapper = styled.div<{ $style: ContainerStyleType,$animationStyle:AnimationStyleType, $mainScrollbars: boolean }>`
   display: flex;
   flex-flow: column;
   height: 100%;
   border: 1px solid #d7d9e0;
   border-radius: 4px;
   ${(props) => props.$style && getStyle(props.$style)}
   ${props=>props.$animationStyle}
+
+  #pageLayout::-webkit-scrollbar {
+    display: ${(props) => props.$mainScrollbars ? "block" : "none"};
+  }
 `;
 
 const HeaderInnerGrid = styled(InnerGrid)<{
@@ -156,8 +160,8 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
             },
           }}
         >
-      <Wrapper $style={style} $animationStyle={animationStyle}>
-        <Layout style={{padding: "0px", overflow: container.mainScrollbars ? "scroll" : "visible"}} hasSider={showSider && !container.innerSider}>
+      <Wrapper $style={style} $animationStyle={animationStyle} $mainScrollbars={container.mainScrollbars}>
+        <Layout id="pageLayout" style={{padding: "0px", overflowY: "scroll"}} hasSider={showSider && !container.innerSider}>
           {showSider && !container.innerSider && !container.siderRight && (
             <><BackgroundColorContext.Provider value={siderStyle?.siderBackground}>
               <Sider 
diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayoutComp.tsx
@@ -159,7 +159,11 @@ export class PageLayoutComp extends layoutBaseComp implements IContainer {
     return [
       this.children.autoHeight.getPropertyView(),
       this.children.siderScrollbars.propertyView({ label: trans("prop.siderScrollbar") }),
-      (!this.children.autoHeight.getView()) && this.children.mainScrollbars.propertyView({ label: trans("prop.mainScrollbar") }),
+      (!this.children.autoHeight.getView()) && (
+       !this.children.siderScrollbars.getView() ||
+       !this.children.contentScrollbars.getView()
+      ) &&
+        this.children.mainScrollbars.propertyView({ label: trans("prop.mainScrollbar") }),
       (!this.children.autoHeight.getView()) && this.children.contentScrollbars.propertyView({ label: trans("prop.showVerticalScrollbar") }),
     ];
   }
