컬럼 Label줄바꿈 표시 질문드립니다.

AXISJ AX5UI
1

setconfig에서
columns: [
{key:‘ORDER_SIZE’, label:‘치수
(mm)’, width:150, align:“center” }
]

로 정의했을때 헤더에 치수 로만 표시되고 줄바꿈(
)태그 밑의 (mm) 은 아래로 내려가서 표시가 안되는데요.

columnHeight로 조절해도 마찬가지입니다.

어떻게 표시해야하는지 질문드립니다.

2

개발자도구에서 해당 컬럼의 CSS정보를 보시면 lineHeight 가 컬럼 높이 만큼 되어 있어서 그렇게 보이실 겁니다.

style class

.grid-multiline-column{
  line-height: 1em;
}

columns

{
  key:'id', label:'치수<br/>(mm)', headerStyleClass : 'grid-multiline-column'
}

그리드 컬럼 헤더를 아름답게 보이게 하려고 line-height를 맞춰두어 생기는 문제인데요. 컬럼에 headerStyleClass를 선언하여 CSS Class를 적용하시면 해결 할 수 있습니다.

3

답변감사드립니다.

조언해주신대로 적용해 봤지만 변화가 없네요.

아래와 같이 td쪽에 클래스는 적용이 됐습니다.

<td data-ax5grid-column-attr="default" data-ax5grid-column-row="0" data-ax5grid-column-col="6" data-ax5grid-column-key="ORDER_SIZE" data-ax5grid-column-colindex="6" data-ax5grid-column-rowindex="0" colspan="1" rowspan="2" class="grid-multiline-column hasBorder " style="height: 51px;min-height: 1px;">

<span data-ax5grid-cellholder="" data-ax5grid-text-align="center" style="height: 25px;line-height: 19px;">치수<br>(mm)</span></td>

4

제가 테스트 해보고 답변을 드렸어야 했는데.
이걸로는 안되겠네요…

{key: "companyJson.대표자명", label: "<span style='display:inline-block;line-height: 14px;vertical-align: middle'>대표<br/>자명</span>", width: 100, align: "center"},

이런식으로 라벨의 값을 html태그로 해주시면 해결이 가능합니다.