Skip to content

Commit c4447b2

Browse files
fixed splitter comp height issue
1 parent 397c8f1 commit c4447b2

File tree

1 file changed

+14
-5
lines changed

1 file changed

+14
-5
lines changed

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

+14-5
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,13 @@ import {
3636
HorizontalIcon,
3737
VerticalIcon,
3838
} from "lowcoder-design/src/icons";
39-
import { BackgroundColor } from "@lowcoder-ee/constants/style";
4039

41-
const SplitPanelWrapper = styled(Splitter.Panel)<{ }>`
40+
const SplitPanelWrapper = styled(Splitter.Panel)`
41+
overflow: hidden;
4242
`;
4343

4444
const SplitterWrapper = styled.div<{ $style: SplitLayoutRowStyleType }>`
45+
height: 100%;
4546
border-radius: ${(props) => props.$style?.radius || "0px"};
4647
border-width: ${(props) => props.$style?.borderWidth || "0px"};
4748
border-color: ${(props) => props.$style?.border || "transparent"};
@@ -103,7 +104,8 @@ const ColumnContainer = (props: ColumnContainerProps) => {
103104
...props.style,
104105
height: props.orientation === "horizontal"
105106
? (props.matchColumnsHeight ? heightCalculator(props.margin) : "auto")
106-
: (props.autoHeight ? "100%" : "auto"),
107+
: (props.autoHeight ? heightCalculator(props.margin) : heightCalculator(props.margin)),
108+
overflow: 'auto',
107109
}}
108110
/>
109111
);
@@ -115,19 +117,26 @@ const SplitLayout = (props: SplitLayoutProps) => {
115117
<BackgroundColorContext.Provider value={props.columnStyle.background}>
116118
<DisabledContext.Provider value={props.disabled}>
117119
<SplitterWrapper $style={props.bodyStyle}>
118-
<Splitter style={{ overflow: props.mainScrollbar ? "auto" : "hidden"}} layout={props.orientation}>
120+
<Splitter
121+
style={{
122+
overflow: props.mainScrollbar ? "auto" : "hidden",
123+
height: props.autoHeight && props.orientation === 'vertical' ? '500px' : '100%',
124+
}}
125+
layout={props.orientation}
126+
>
119127
{props.columns.map((col, index) => {
120128
const id = String(col.id);
121129
const childDispatch = wrapDispatch(wrapDispatch(props.dispatch, "containers"), id);
122130
const containerProps = props.containers[id]?.children;
131+
123132
return (
124133
<SplitPanelWrapper
125134
key={id}
126135
collapsible={col.collapsible}
127136
{...(col.minWidth !== undefined ? { min: col.minWidth } : {})}
128137
{...(col.maxWidth !== undefined ? { max: col.maxWidth } : {})}
129138
{...(col.width !== undefined ? { defaultSize: col.width } : {})}
130-
>
139+
>
131140
<ColumnContainer
132141
layout={containerProps.layout.getView()}
133142
items={gridItemCompToGridItems(containerProps.items.getView())}

0 commit comments

Comments
 (0)