Content-Length: 6835 | pFad | http://github.com/lowcoder-org/lowcoder/pull/1688.patch

thub.com From c11333e3f7486185c1182e501adc54baa7a19434 Mon Sep 17 00:00:00 2001 From: Faran Javed Date: Tue, 13 May 2025 16:58:04 +0500 Subject: [PATCH] [FIX]: #1497 Page Layout Sider / padding issues --- .../comps/containerComp/pageLayoutComp.tsx | 6 ++--- .../comps/comps/pageLayoutComp/pageLayout.tsx | 27 ++++++++++++++----- 2 files changed, 22 insertions(+), 11 deletions(-) diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx index 0ca13d6527..efa3dc6b3d 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/pageLayoutComp.tsx @@ -141,10 +141,8 @@ export const PageLayoutComp = withMethodExposing(PageLayoutCompTmP, [ params: [{ name: "collapsed", type: "boolean" }], }, execute: (comp, values) => { - const page = values[0] as number; - if (page && page > 0) { - // comp.children.pagination.children.pageNo.dispatchChangeValueAction(page); - } + const collapsed = !!values[0]; // Ensure boolean value + comp.children.container.children.siderCollapsed.dispatchChangeValueAction(collapsed); }, } ]); diff --git a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx index bfece6cf21..13ed39aefc 100644 --- a/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx +++ b/client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx @@ -103,10 +103,12 @@ const BodyInnerGrid = styled(InnerGrid)<{ $bodyBackgroundImageSize: string; $bodyBackgroundImagePosition: string; $bodyBackgroundImageOrigin: string; + $bodyPadding: string; }>` border-top: ${(props) => `${props.$showBorder ? props.$borderWidth : 0} solid ${props.$borderColor}`}; flex: 1; border-radius: 0; + padding: ${(props) => props.$bodyPadding || "0px"} !important; ${props => getBackgroundStyle({ background: props.$backgroundColor, @@ -169,9 +171,18 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi const isMobile = checkIsMobile(maxWidth); const appRef = useRef(); + // Handle mobile responsiveness for sider collapse + useEffect(() => { + // Force collapse on mobile if sider is shown + if (isMobile && showSider) { + props.setSiderCollapsed(true); + } + }, [isMobile, showSider, props.setSiderCollapsed]); + function onSiderCollapse (collapsed : boolean) { props.setSiderCollapsed(collapsed); - // how to set the collapsed state in the container when the user manually collapses the sider? + // We already updated the state through props.setSiderCollapsed + // The parent component will update the value via useEffect } useEffect(() => {setSiderCollapsed(container.siderCollapsed)} , [container.siderCollapsed]); @@ -196,7 +207,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi onSiderCollapse(value)} @@ -255,7 +266,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi setSiderCollapsed(value)} @@ -312,7 +323,8 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi $bodyBackgroundImageOrigin={bodyStyle?.backgroundImageOrigin} $borderColor={style?.border} $borderWidth={style?.borderWidth} - style={{ padding: bodyStyle.containerBodyPadding }} /> + $bodyPadding={bodyStyle.containerBodyPadding} + style={{ padding: "0px" }} /> )} @@ -321,7 +333,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi + $bodyPadding={bodyStyle.containerBodyPadding} + style={{ padding: "0px" }} /> )} @@ -416,7 +429,7 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi

pFad - (p)hone/(F)rame/(a)nonymizer/(d)eclutterfier! Saves Data!