Skip to content

ν•˜λ‹¨ν•©κ³„μ˜μ—­ summary μ‚¬μš© μ‹œ κ°€λ‘œ 슀크둀이 λΆˆκ°€λŠ₯ν•˜λ‚˜μš”?Β #2110

@hyunjho

Description

@hyunjho

summary μ‚¬μš© μ‹œ μ˜λ„λœ 섀계 μ œν•œμΈμ§€
이미 μ•Œλ €μ§„ μ œμ•½ 사항인지
μ•„λ‹ˆλ©΄ μˆ˜μ • κ°€λŠ₯ν•œ 버그인지
곡식적인 μ„€λͺ…μ΄λ‚˜ ꢌμž₯ νŒ¨ν„΄μ΄ μžˆλŠ”μ§€ μ•Œκ³  μ‹ΆμŠ΅λ‹ˆλ‹€.


Summary (μš”μ•½)

summary(합계)λ₯Ό μ‚¬μš©ν•˜λŠ” 경우,
컬럼 전체 λ„ˆλΉ„κ°€ κ·Έλ¦¬λ“œ μ»¨ν…Œμ΄λ„ˆ λ„ˆλΉ„λ₯Ό μ΄ˆκ³Όν•΄λ„ κ°€λ‘œ 슀크둀이 μƒμ„±λ˜μ§€ μ•ŠλŠ” ν˜„μƒμ΄ λ°œμƒν•©λ‹ˆλ‹€.

λ™μΌν•œ λ ˆμ΄μ•„μ›ƒκ³Ό μ„€μ •μ—μ„œ summaryλ₯Ό μ œκ±°ν•˜λ©΄
μ¦‰μ‹œ κ°€λ‘œ 슀크둀이 μ •μƒμ μœΌλ‘œ λ‚˜νƒ€λ‚©λ‹ˆλ‹€.

Version (버전) Toast UI Grid: v4.21.22

Additional context (μΆ”κ°€ μ„€λͺ…)
λ ˆμ΄μ•„μ›ƒ ꡬ쑰

GridλŠ” flex 기반 split λ ˆμ΄μ•„μ›ƒ 내뢀에 μœ„μΉ˜ν•©λ‹ˆλ‹€.

min-width: 0 λ“± flex κ΄€λ ¨ ν•„μˆ˜ 쑰건은 λͺ¨λ‘ μ μš©λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

λΆ€λͺ¨ μ»¨ν…Œμ΄λ„ˆ(gridMasterArea)μ—λŠ” overflow-x: autoκ°€ μ„€μ •λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

Grid μ„€μ • (λ‹¨μˆœν™”)
const grid = new Grid({
el: document.getElementById('grid-container01'),
scrollX: true,
scrollY: true,
columns: [
{ name: 'col1', width: 200 },
{ name: 'col2', width: 200 },
{ name: 'col3', width: 200 },
{ name: 'col4', width: 200 }
],
summary: {
height: 45,
position: 'bottom'
}
});

컬럼 λ„ˆλΉ„ ν•©κ³„λŠ” μ»¨ν…Œμ΄λ„ˆ λ„ˆλΉ„λ₯Ό λͺ…ν™•νžˆ μ΄ˆκ³Όν•©λ‹ˆλ‹€.

컬럼 λ¦¬μ‚¬μ΄μ¦ˆλ‘œλ„ λ„ˆλΉ„λ₯Ό 더 크게 λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

λ°œμƒν•˜λŠ” ν˜„μƒ

❌ summary μ‚¬μš© μ‹œ

κ°€λ‘œ 슀크둀이 μƒμ„±λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

Grid 전체 λ„ˆλΉ„κ°€ μ»¨ν…Œμ΄λ„ˆ λ„ˆλΉ„μ— 맞좰 κ°•μ œλ‘œ λ§žμΆ°μ§€λŠ” κ²ƒμ²˜λŸΌ λ³΄μž…λ‹ˆλ‹€.

βœ… summary 제거 μ‹œ

λ™μΌν•œ λ ˆμ΄μ•„μ›ƒ, λ™μΌν•œ 컬럼 μ„€μ •μ—μ„œ

μ¦‰μ‹œ κ°€λ‘œ 슀크둀이 μ •μƒμ μœΌλ‘œ μƒμ„±λ©λ‹ˆλ‹€.

μ•„λž˜ 쑰건을 λͺ¨λ‘ λ§Œμ‘±ν•΄λ„ λ™μΌν•©λ‹ˆλ‹€.

scrollX: true μ„€μ •

split λ¦¬μ‚¬μ΄μ¦ˆ ν›„ refreshLayout() 호좜

λΆ€λͺ¨ μ»¨ν…Œμ΄λ„ˆμ— overflow-x: auto 적용

κΈ°λŒ€ λ™μž‘ (Expected behavior)

summary μ‚¬μš© 여뢀와 관계없이
컬럼 전체 λ„ˆλΉ„κ°€ κ·Έλ¦¬λ“œ μ»¨ν…Œμ΄λ„ˆ λ„ˆλΉ„λ₯Ό μ΄ˆκ³Όν•˜λ©΄ κ°€λ‘œ 슀크둀이 μƒμ„±λ˜κΈ°λ₯Ό κΈ°λŒ€ν•©λ‹ˆλ‹€.

μ‹€μ œ λ™μž‘ (Actual behavior)

summaryκ°€ ν™œμ„±ν™”λ˜λ©΄
헀더 / λ°”λ”” / 합계 μ˜μ—­μ˜ λ„ˆλΉ„κ°€ μ»¨ν…Œμ΄λ„ˆ λ„ˆλΉ„μ— κ°•μ œλ‘œ λ™κΈ°ν™”λ˜λŠ” κ²ƒμ²˜λŸΌ 보이며,
이둜 인해 κ°€λ‘œ 슀크둀이 μƒμ„±λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

μ΄λŠ” summary μ‚¬μš© μ‹œμ˜ 섀계상 μ œμ•½ λ˜λŠ” λ‚΄λΆ€ λ™μž‘ λ°©μ‹μœΌλ‘œ λ³΄μž…λ‹ˆλ‹€.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions