하단합계영역 summary 사용 시 가로 스크롤이 불가능하나요?

[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 사용 시의 설계상 제약 또는 내부 동작 방식으로 보입니다.

[bernice75]

저도 해당 문제가 발생하고 있습니다..혹시 해결 경험 있으신 다른 분이 계시다면 코멘트 꼭 남겨주세요

<수정>
저 같은 경우는 css 문제였고, ::-webkit-scrollbar {display: none;} 이 원인이었습니다.
필요에 의해 작성된 것이기 때문에 아래와 같이 tui-container 영역에서는 다시 스크롤을 사용할 수 있도록 설정했습니다.
(tui css에도 해당 내용과 비슷한 게 작성되어 있는 것으로 알고 있는데, 덮여진 것 같습니다.)

.tui-grid-container ::-webkit-scrollbar {
    display: block;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
}