Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit624d349

Browse files
committed
[FIX]:#1626 Column Layout Component Width Issue
1 parent6c7a7c5 commit624d349

File tree

2 files changed

+19
-31
lines changed

2 files changed

+19
-31
lines changed

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

Lines changed: 18 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -46,17 +46,13 @@ import { getBackgroundStyle } from "@lowcoder-ee/util/styleUtils";
4646
constContainWrapper=styled.div<{
4747
$style:ContainerStyleType&{
4848
display:string,
49-
gridTemplateColumns:string,
50-
columnGap:string,
51-
gridTemplateRows:string,
52-
rowGap:string,
49+
flexWrap:string,
50+
gap:string,
5351
}|undefined;
5452
}>`
5553
display:${(props)=>props.$style?.display};
56-
grid-template-columns:${(props)=>props.$style?.gridTemplateColumns};
57-
grid-template-rows:${(props)=>props.$style?.gridTemplateRows};
58-
column-gap:${(props)=>props.$style?.columnGap};
59-
row-gap:${(props)=>props.$style?.rowGap};
54+
flex-wrap:${(props)=>props.$style?.flexWrap};
55+
gap:${(props)=>props.$style?.gap};
6056
6157
border-radius:${(props)=>props.$style?.radius};
6258
border-width:${(props)=>props.$style?.borderWidth};
@@ -67,11 +63,14 @@ const ContainWrapper = styled.div<{
6763
${props=>props.$style&&getBackgroundStyle(props.$style)}
6864
`;
6965

70-
constColWrapper=styled(Col)<{
66+
constColWrapper=styled.div<{
7167
$style:ResponsiveLayoutColStyleType|undefined,
72-
$minWidth?:string,
68+
$width?:string,
7369
$matchColumnsHeight:boolean,
7470
}>`
71+
flex:${props=>props.$width ?"0 0 "+props.$width :"1 1 0"};
72+
min-width: 0; /* Prevent flex items from overflowing */
73+
7574
> div {
7675
height:${(props)=>props.$matchColumnsHeight ?`calc(100% -${props.$style?.padding||0} -${props.$style?.padding||0})` :'auto'};
7776
border-radius:${(props)=>props.$style?.radius};
@@ -94,11 +93,8 @@ const childrenMap = {
9493
horizontalGridCells:SliderControl,
9594
autoHeight:AutoHeightControl,
9695
matchColumnsHeight:withDefault(BoolControl,true),
97-
templateRows:withDefault(StringControl,"1fr"),
98-
rowGap:withDefault(StringControl,"20px"),
99-
templateColumns:withDefault(StringControl,"1fr 1fr"),
96+
gap:withDefault(StringControl,"20px"),
10097
mainScrollbar:withDefault(BoolControl,false),
101-
columnGap:withDefault(StringControl,"20px"),
10298
style:styleControl(ContainerStyle,'style'),
10399
columnStyle:styleControl(ResponsiveLayoutColStyle,'columnStyle')
104100
};
@@ -129,10 +125,7 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
129125
containers,
130126
dispatch,
131127
matchColumnsHeight,
132-
templateRows,
133-
rowGap,
134-
templateColumns,
135-
columnGap,
128+
gap,
136129
columnStyle,
137130
horizontalGridCells,
138131
mainScrollbar
@@ -145,24 +138,21 @@ const ColumnLayout = (props: ColumnLayoutProps) => {
145138
<ScrollBarstyle={{margin:"0px",padding:"0px"}}overflow="scroll"hideScrollbar={!mainScrollbar}>
146139
<ContainWrapper$style={{
147140
...props.style,
148-
display:"grid",
149-
gridTemplateColumns:templateColumns,
150-
columnGap,
151-
gridTemplateRows:templateRows,
152-
rowGap,
141+
display:"flex",
142+
flexWrap:"wrap",
143+
gap:gap,
153144
}}>
154145
{columns.map(column=>{
155146
constid=String(column.id);
156147
constchildDispatch=wrapDispatch(wrapDispatch(dispatch,"containers"),id);
157148
if(!containers[id])returnnull
158149
constcontainerProps=containers[id].children;
159-
constnoOfColumns=columns.length;
150+
160151
return(
161-
<BackgroundColorContext.Providervalue={props.columnStyle.background}>
152+
<BackgroundColorContext.Providervalue={props.columnStyle.background}key={id}>
162153
<ColWrapper
163-
key={id}
164154
$style={props.columnStyle}
165-
$minWidth={column.minWidth}
155+
$width={column.minWidth}
166156
$matchColumnsHeight={matchColumnsHeight}
167157
>
168158
<ColumnContainer
@@ -227,10 +217,7 @@ export const ResponsiveLayoutBaseComp = (function () {
227217
{controlItem({},(
228218
<divstyle={{marginTop:'8px'}}>{trans("responsiveLayout.columnsSpacing")}</div>
229219
))}
230-
{children.templateColumns.propertyView({label:trans("responsiveLayout.columnDefinition"),tooltip:trans("responsiveLayout.columnsDefinitionTooltip")})}
231-
{children.templateRows.propertyView({label:trans("responsiveLayout.rowDefinition"),tooltip:trans("responsiveLayout.rowsDefinitionTooltip")})}
232-
{children.columnGap.propertyView({label:trans("responsiveLayout.columnGap")})}
233-
{children.rowGap.propertyView({label:trans("responsiveLayout.rowGap")})}
220+
{children.gap.propertyView({label:trans("responsiveLayout.gap")})}
234221
</Section>
235222
</>
236223
)}

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3899,6 +3899,7 @@ export const en = {
38993899
"rowDefinition":"Row Definition",
39003900
"columnGap":"Column Gap",
39013901
"rowGap":"Row Gap",
3902+
"gap":"Gap",
39023903
"atLeastOneColumnError":"Responsive Layout Keeps at Least One Column",
39033904
"columnsPerRow":"Columns per Row",
39043905
"columnsSpacing":"Columns Spacing (px)",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp