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 394 forks source link

<p> 여러개가 포함된 value인 경우 grid에서 문제가 발생합니다. #1789

Open tarr4h opened 2 years ago

tarr4h commented 2 years ago

안녕하세요? 특정 컬럼에서 rowHeight이 적용되지 않아서 이것저것 보고있었는데요.

p태그 하나인 경우, 정상적으로 동작합니다. p태그가 여러개 포함된 경우에만 row내에서 p태그 2개 영역마다 1개의 row처럼 클릭이 되네요..

물론 개행이 포함된 꽤 긴 글자를 컬럼에 넣는건 바람직하지 않겠지만.. 필요해서요.

아래 스크린샷 첨부 확인 부탁드립니다. 첫번째 이미지 보시면 1개의 row안쪽을 클릭했을 때 p태그 2개당 1개의 row인것처럼 클릭되고 있습니다.(1) value가 입력된 row 내 모든 컬럼에 동일하게 발생합니다.

 .tui-grid-cell.tui-grid-cell-has-input div div p {
    display: inline;
}

css를 임의로 건드려서 처리하긴 했는데요, 혹시 이게 발생하는게 제가 설정을 잘못한 부분이 있는걸까요?

grid version : 4.18.1

Screenshots Screen Shot 2022-09-21 at 4 16 54 PM Screen Shot 2022-09-21 at 4 17 20 PM Screen Shot 2022-09-21 at 4 17 02 PM

Desktop (please complete the following information):

jajugoguma commented 1 year ago

Sorry for late replying.

The TOAST UI Grid doesn't behave correctly when using data with HTML tags for newlines. If you want a newline, why not try using the pre-line from the WhiteSpace example?