fix: floatingRow shows incompletely for multiple rows(fix #1427) #1477
Conversation
| overflow: hidden; | ||
| line-height: normal; | ||
| vertical-align: middle; | ||
| text-align: center; |
There was a problem hiding this comment.
vertical-align말고 나머지 스타일은 없어도 될 것 같은데 추가된 이유가 있나요?
There was a problem hiding this comment.
overflow의 경우 요소를 초과하는 정보를 감추기 위해 사용했습니다.
text-align은 로우 헤더에 해당하는 요소를 중앙 정렬하기 위해 사용했습니다. 다른 요소의 경우 오버랩을 통해 좌측 정렬하도록 했습니다.
line-height의 경우 개행된 데이터가 표시된 경우 상위 요소에 설정한 값이 상속되어 정상적으로 표시 되지 않기 때문에 이를 방지하기 위한 용도로 추가했습니다.
There was a problem hiding this comment.
아 넵 이해했습니다. 정렬은 left를 기본으로 하고 로우 헤더만 중앙 정렬하는게 어떤가요? 일반적으로 기본 셀이 더 많을 거라서요
There was a problem hiding this comment.
일반 셀은 .tui-grid-floating-cell .tui-grid-cell-content로 쉽게 접근할 수 있지만 로우 헤더는 그렇지 않아서 위와 같이 작성 했습니다.
floating cell 생성 시 로우 헤더인지 판별 후 인라인 스타일로 지정하는 방식으로 변경하는 것이 더 나을까요?
| padding: 0 5px; | ||
| word-break: break-all; | ||
| text-align: start; |
There was a problem hiding this comment.
패딩은 간격 조정때문에 넣은 것 같은데 나머지 스타일은 어떤 용도일까요~? 기본적으로 좌측 정렬(ltl 기준)이라 start는 제거해도 되겠네요
There was a problem hiding this comment.
floating layer가 기존 row와 동일하게 보여주기 위해 추가된 스타일 입니다.
좌측 정렬의 경우 row header에 해당하는 요소는 중앙 정렬로 하고, 그렇지 않은 경우 스타일 오버랩으로 좌측정렬을 시켜주었습니다.
Please check if the PR fulfills these requirements
fix #xxx[,#xxx], where "xxx" is the issue number)Description
As-Is
To-Be
Thank you for your contribution to TOAST UI product. 🎉 😘 ✨