GWT 셀의 아래쪽을 따라 회전 된 텍스트를 정렬하는 Flextable 및 CSS

GWT flextable에서 텍스트를 정렬하려고하면 텍스트가 -90 도로 회전하여 셀의 맨 아래에 정렬됩니다.GWT 셀의 아래쪽을 따라 회전 된 텍스트를 정렬하는 Flextable 및 CSS

Label lblLeadership = new Label("Leadership Course"); 
      lblLeadership.setStyleName("gwt-Rotate"); 
      flexTable.setWidget(0, 1, lblLeadership); 
      flexTable.getCellFormatter().setHeight(0, 1, "200px"); 
      flexTable.getCellFormatter().setHorizontalAlignment(0, 1, HasHorizontalAlignment.ALIGN_CENTER); 
      flexTable.getCellFormatter().setVerticalAlignment(0, 1, HasVerticalAlignment.ALIGN_BOTTOM);

그러나이 당 셀의 바닥을지나 연장되는 텍스트 결과 : I가 사용하고있는 코드의 예는 (이 행의 모든 셀들이 같은 높이)이다 Incorrect allignment 경우 I 사용 :

flexTable.getCellFormatter().setVerticalAlignment(0, 1, HasVerticalAlignment.ALIGN_MIDDLE);

중간에 텍스트가 정렬됩니다. 그러나 이것은보기에 좋지 않습니다.

내가 사용하는 경우 :

flexTable.getCellFormatter().setVerticalAlignment(0, 1, HasVerticalAlignment.ALIGN_TOP);

그런 다음 텍스트는 제목 "팩 개요"메뉴로 셀의 상부를지나 확장합니다.

내 CSS는 다음과 같습니다 셀의 하단에 잘하시기 바랍니다 정렬 할 텍스트를 얻을 수있는 방법이

.gwt-Rotate { 
    color: Black; 
    font-size: 12px; 
    font-style: normal; 
    font-family: Arial; 
    font-weight: bold; 
    /* Safari */ 
    -webkit-transform: rotate(-90deg); 
    /* Firefox */ 
    -moz-transform: rotate(-90deg); 
    /* IE */ 
    -ms-transform: rotate(-90deg); 
    /* Opera */ 
    -o-transform: rotate(-90deg); 
    /* Internet Explorer */ 
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); 
}

있습니까?

귀하의 도움에 감사드립니다.

감사

글린

출처

2015-02-02 Glyn

는 transform-origin (IE> = 9) 및 transform: translate 사용해보십시오.

예 http://codepen.io/anon/pen/azLmbg

출처

2015-02-02 10:21:33 PapaStan

안녕 @PapaStan이 조언을 주셔서 감사합니다. 그러나 이렇게하면 회전 된 텍스트가 "이름"머리글 위에 가장 왼쪽으로 이동합니다. Regards, Glyn – Glyn

텍스트가'text-align : center;'입니까? – PapaStan

안녕하세요 @PapaStan, 나는 너무 빨리 귀하의 원래 솔루션을 기각해서는 안됩니다. 주위를 놀고 난 후에 나는 그것을 발견했다 "transform-origin : 325 % 50 %;" 대답이었다. 이제 모든 것이 멋지게 정리됩니다. 고맙습니다. 감사합니다, 글린. ps., 귀하의 질문에 대답하기 위해 "text-align : left;"를 사용하고 있습니다. – Glyn

GWT 셀의 아래쪽을 따라 회전 된 텍스트를 정렬하는 Flextable 및 CSS

답변

관련 문제