nhn / tui.grid

🍞🔡 The Powerful Component to Display and Edit Data. Experience the Ultimate Data Transformer!
http://ui.toast.com/tui-grid/
MIT License
2.42k stars 391 forks source link

동적인 rowHeight에 대한 렌더링 질문드립니다. #2039

Closed bernice75 closed 5 months ago

bernice75 commented 5 months ago

Summary A clear and concise description of what the question is. 질문 요약 : How to set dynamic row length

Screenshots If applicable, add screenshots to help explain your question. image

Version Write the version of the grid you are currently using. 사용 중인 버전 : v.4.6.1

Additional context Add any other context about the problem here. 질문 : 안녕하세요! 좋은 도구를 개발해주셔서 감사합니다. 매우 유용하게 잘 사용하고 있습니다. 이 제품을 사용하면서 행 높이를 동적으로 설정하는 방법에 대한 질문이 생겼습니다. 현재 상단의 사진과 같이 체크박스를 렌더링하여 사용 중에 있습니다. API 문서를 참고하여 체크박스에 대해서는 "rowHeader" 옵션으로 설정하고, 그 외 request API를 통해 JSON으로 받아오는 데이터에 대해 지정한 컬럼은 "columns" 옵션으로 설정했습니다. 그런데 rowHeader 옵션으로 설정된 컬럼의 행 높이와 columns 옵션으로 설정된 컬럼의 행 높이가 별도로 설정되는 것 같습니다.(위 사진과 같이 행의 높이가 서로 달랐습니다.) 그리고 각 셀을 선택하면 표시되는 파란 상자도 마찬가지로 동적으로 지정된 행의 높이와는 다른 크기였습니다.(아마 기본 설정 크기일 것으로 예상됩니다.) 행 높이를 동적으로 설정할 때 사용한 columns 옵션의 세부 옵션 : whiteSpace: 'normal'

화면에 출력된 행 중 높이가 가장 긴 행을 기준으로 rowHeight 옵션을 설정하니 임시방편으로 어긋난 선이 맞춰지긴 했는데, 현재 설정한 행의 높이보다 더 긴 행이 생길 경우 또 다시 이러한 설정을 감수해야만 하는 상황입니다. 해당 문제를 해결할 수 있는 솔루션이 필요합니다.

부트스트랩 css와 js를 사용 중이긴 하지만, 그리드와 관련해서 중복 적용될 가능성이 있는 class 명 등은 현재까지는 존재하지 않는 것으로 확인했습니다.

bernice75 commented 5 months ago

padding 관련 문제임을 확인했습니다. css에서 수정하여 해결했습니다!