Vaadin 14의 Grid에서 열 머리글의 텍스트를 여러 줄로 줄 바꿈 할 수 있습니까?
조나단 실베스터
위 이미지에서는 GridVaadin 14에서 생성했습니다. 열 제목이 줄 바꿈되지 않은 빨간색 선을 확인하십시오.
열 레이블을 줄 바꿈 할 수있는 (안전 / 쉬운 / 표준) 가능한 (예를 들어 Excel에서와 같이) 알아 내려고합니다.
나도 동료도 그렇게하는 방법을 알 수 없었습니다.
Steffen Harbich
다음 스 니펫에서와 같이 Vaadin 그리드 스타일을 조정해야합니다.
/* wrap text in grid column headers */
[part~="header-cell"] {
white-space: normal;
}
@CssImport주석을 통해 CSS를 포함하고 그리드 테마 :
@CssImport(value = "./styles/grid-styles.css", themeFor = "vaadin-grid")
public class YourViewOrLayout extends Composite<Div> {
...
}
웹 구성 요소 스타일링의 주요 혼란은 Shadow DOM 개념에서 발생합니다. 각 웹 구성 요소에는 고유 한 스타일 범위가 있습니다. 즉, shadow DOM 내의 모든 HTML 태그는 shadow DOM <style>내의 태그 를 통해 스타일이 지정되어야합니다 . 웹 컴포넌트 (Vaadin Grid)는 스타일과 함께 제공되지만 @CssImport위와 같이 주석을 사용하여 자신 만의 스타일을 추가 할 수 있습니다 . <vaadin-grid>브라우저의 개발자 도구 (IE / Edge 제외)를 사용 하여 태그 의 HTML 구조를 검사하면 Shadow DOM을 확인할 수 있습니다. 그러나 웹 구성 요소 아래에있는 일부 태그는 Shadow DOM의 일부가 아닙니다. 이들은에 의해 참조되며 <slot>전역 스타일이 적용됩니다. Vaadin Grid의 경우 셀 내용이 슬롯으로 지정됩니다.
참고 : 이전 버전의 Vaadin Flow는 사용자 지정 웹 구성 요소 스타일을 포함하는 방법이 약간 다릅니다. 설명서를 참조하십시오 .
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
에서 수정
관련 기사
Related 관련 기사
- 1
UIAlertView 버튼에 여러 줄의 텍스트를 사용할 수 있습니까?
- 2
여러 줄 변수의 각 줄에 텍스트를 어떻게 추가 할 수 있습니까?
- 3
줄 바꿈 구분 기호를 사용하여 셀의 텍스트를 SQL의 여러 레코드로 분할하는 방법이 있습니까?
- 4
여러 줄을 사용하여 문자열에 값을 할당 할 때 상수의 줄 바꿈
- 5
여러 줄에 텍스트를 추가 할 수 있습니까?
- 6
동일한 컨테이너에있는 다른 요소의 크기에 따라 인라인 텍스트를 줄 바꿈 할 수 있습니까?
- 7
Java의 REGEX : 여러 줄 모드에서 ^를 사용하여 줄 바꿈을 감지 할 수 없음
- 8
부트 스트랩 툴팁-텍스트를 줄 바꿈 할 수 있습니까?
- 9
줄 바꿈이 켜져있을 때 숭고한 텍스트에서 넘쳐나는 줄 바꿈 시작으로 어떻게 이동할 수 있습니까?
- 10
명령 줄 도구를 사용하여 여러 줄의 작은 따옴표 안에있는 텍스트를 어떻게 대체 할 수 있습니까?
- 11
URL에서 읽은 텍스트의 줄 바꿈을 유지할 수 없습니다.
- 12
HTML (약간의 PHP 포함)-텍스트 줄 바꿈시 텍스트 들여 쓰기를 유지할 수 없습니다.
- 13
정규식을 사용하여 동적 탭과 줄 바꿈으로 구분 된 문자열의 유효성을 어떻게 확인할 수 있습니까?
- 14
js에서 이중 줄 바꿈으로 텍스트를 분할 할 수 없습니다.
- 15
asp.net 여러 줄 텍스트 상자의 경우 javascript에서 줄 바꿈이 무시됩니다.
- 16
수식, 텍스트 줄 바꿈 또는 열 너비를 "데이터에 맞추기"로 변경하지 않고 vlookup에서 Google 스프레드 시트의 텍스트를 검사 하시겠습니까?
- 17
어떻게 alfred의`run script` 워크 플로우에서 osascript로 줄 바꿈없이 무언가를 에코 할 수 있습니까?
- 18
어떻게 alfred의`run script` 워크 플로우에서 osascript로 줄 바꿈없이 무언가를 에코 할 수 있습니까?
- 19
어떻게 alfred의`run script` 워크 플로우에서 osascript로 줄 바꿈없이 무언가를 에코 할 수 있습니까?
- 20
자바 스크립트에서 COM을 사용하여 "여러 줄의 텍스트"값을로드 할 수 없습니다.
- 21
sed를 사용하여 텍스트 파일에서 임의의 여러 줄을 어떻게 삭제할 수 있습니까?
- 22
SED의 줄 범위 내에서 줄 바꿈을 콜론으로 어떻게 바꿀 수 있습니까?
- 23
줄 바꿈에서 셀의 텍스트 분할
- 24
여러 줄의 heredocument에서 한 줄짜리 herestring으로, 줄 바꿈 포함
- 25
수백 줄의 텍스트 끝에 쉼표를 수동으로 추가 할 수 있습니까?
- 26
Python에서 동일한 데이터를 포함하는 한 줄의 텍스트로 파일의 여러 3 줄 텍스트 블록을 어떻게 바꿀 수 있습니까?
- 27
GhostScript로 PDF 오버레이를 만들 때 텍스트를 자동으로 줄 바꿈 할 수 있습니까?
- 28
여러 줄 sed 스크립트 오류 : 줄 바꿈을 문자열 구분 기호로 사용할 수 없습니다.
- 29
여러 줄 문자열 값의 경우 첫 번째 줄에 주석을 추가 할 수 있습니까?
몇 마디 만하겠습니다