Direção do texto de uma coluna - dataTable [RESOLVIDO]

Front-end
#1

Olá Pessoal.

Gostaria de saber como faço para alterar a direção do texto (Ex: coloca-lo na vertical) de uma coluna em um dataTable em JSF.

Desde já agradeço.

Abraços.

Renan.

#2

Ninguém?

#3

Renan, tentou aplicar css?!

veja: http://www.ssi-developer.net/css/vertical-text.shtml

#4

Olá Luiz.

Tentei aplicar o seu exemplo, mas não obtive sucesso.

Ficou da seguinte forma:

<h:head>

	<style type="text/css">
.ui-layout-north {
	z-index: 20 !important;
	overflow: visible !important;;
}

.ui-layout-north .ui-layout-unit-content {
	overflow: visible !important;
}

.ui-widget {
	font-size: 10px !important;
}

.verticaltext {
	writing-mode: tb-rl;
	filter: flipv fliph;
}

.size {
	width: 800px;
	position: relative;
	left: 22%;
	top: 10%;
}

.centro {
	top: 50%
}

.tabela {
	width: 750px;
}
</style>


						<p:columns var="b"
							value="#{preenchimentoBacking.listaDisciplinas}">
							<div align="center">
								<f:facet name="header">
                                                  
                                                           //Esse texto no div que eu gostaria de exibir na vertical e ainda esta sendo exibido na horizontal.
								<div class="verticaltext">
									#{b.turma.disciplina.idOrion} - #{b.turma.disciplina.nome} - #{b.turma.docente.nome} 
								</div>
								</f:facet>
								<p:inputText size="5" />
							</div>
						</p:columns>

Mais alguma sugestão?

Desde já agradeço.

Abraços.

Renan.

#5

Renan, desculpe não percebi que a informação dizia que apenas funcionava para o IE.

veja: http://forum.zwame.pt/showthread.php?t=264116&page=1

segue abaixo outros links

http://css-tricks.com/snippets/css/text-rotation/

http://www.developerdrive.com/2012/05/rotating-web-page-elements-using-the-css3-rotate-transform/

[code]<h:head>
Rotacionar Texto

.ui-widget {
font-size: 10px !important;
}

        .verticaltext {
            /*General*/
            transform: rotate(-90deg)!important;
            /*Firefox*/
            -moz-transform: rotate(-90deg)!important;
            /*Microsoft Internet Explorer*/
            writing-mode: tb-rl !important;
            filter: flipv fliph !important;
            /*Chrome, Safari*/
            -webkit-transform: rotate(-90deg)!important;
            /*Opera*/
            -o-transform: rotate(-90deg)!important;
            /*alter opacity*/
            opacity:0.8!important;
            filter:alpha(opacity=80)!important;              
        }
        .centro {
            top: 50%
        }
    </style>        
</h:head>[/code]

Abraços

#6

Opa valeu Luiz, funcionou, agora vou dar uma pesquisada em como aumentar a altura da coluna de acordo com o conteúdo apresentado nela, pois esta escondendo o texto.

Abraços.

Renan.

#7

Bom saber…

Apenas edite o titulo do post vlw…

Abraços

#8