4

Gostaria de saber se é possível fazer o seguinte:

Preciso em uma datatable definir uma altura máxima de uma coluna. Porque tem algumas que o texto fica extenso demais e o valor da coluna é um Sim ou Não, assim o título fica demasiadamente grande. Então pensei na possibilidade de quebrar o titulo, mas com um altura máxima. Assim o texto ficaria com o tamanho que seria ideal.

inserir a descrição da imagem aqui

16
  • Só para me certificar antes de avançar com alguma resposta: esta imagem exibe o resultado pretendido?
    – Cold
    10/09/2014 às 8:54
  • Não. Seria o que não quero, gostaria de limitar ao máximo de 3 linhas de altura. Problema que percebi que aí usar o onDemand do primefaces ele pode ficar todo quebrado, o título em relação ao conteúdo da coluna. 10/09/2014 às 9:27
  • Antes mesmo de responder... Pelo que vejo uma solução passaria por aumentar a largura de tal forma que tivéssemos no máximo 3 linhas. E por outra, se forem colunas dinâmicas, aí a coisa pode complicar mais um pouco, entre tanto terias de limitar à uma altura fixa, uma largura considerável e um certo limite de caráteres. Minha opinião. O que achas?
    – Cold
    10/09/2014 às 9:29
  • Amigo o que falta do outro lado dessa mensagem é conhecimento, rs. Mas é o seguinte eu consegui fazer isso aumentando em muito a largura da tabela estipulado um valor de porcentagem muito acima do dialog que eu uso para exibir, ai sim consegui controlar o tamanho das colunas problema é que o recurso da datatable onDemand ele as vezes da pau, vi outros usuários reclamando disso também. 10/09/2014 às 9:35
  • 1
    Hum, eu entendi que você teria algum algoritmo dinâmico que reconhece o conteúdo de uma célula e ajusta a largura 10/09/2014 às 9:57

2 Respostas 2

0

Para fazer o que você perguntou basta definir max-height no stilo da sua coluna definindo o tamanho máximo em pixels.

<p:column ... style="max-height: 50px" >

Mas no caso que você citou acima eu recomendaria colocar uma abreviação na linha do cabeçalho e na propriedade title colocaria o texto completo. Dessa forma quando o usuário passar o mouse em cima do cabeçalho irá aparecer o texto completo. Ex:

<h:outputText value="Pode alterar" title="Permissão para alterar os dados cadastrais do cliente" />
0

Você pode colocar uma caixa de detalhes quando usuário passar o mouse por cima do nome da coluna. Quanto a formatação do nome da coluna em si, você pode escolher definir como linha única ou com um limite do número de linhas que você quer que apareçam.

  <div class="box box1">
    <p class="text-box">
      Nome da coluna introduzido e abreviado em uma única linha.
    </p>
    <p class="detalies">
      Mais detalhes sobre o nome da coluna
    </p>
  </div>
  
  
  <div class="box box2">
    <p class="text-box">
      Caso queira colocar um limite de mais de uma linha nome da coluna. Digamos 2 linhas.
    </p>
    <p class="detalies">
      Mais detalhes
    </p>
  </div>
.box{
  width:200px;
  position:relative;
}

.box .detalies{
  display:none;
}

.box:hover .detalies{
  display:block;
  position: absolute;
  background-color: white;
  top: -100%;
  left: 50%;
  box-shadow: 0 0 30px rgba(126,126,126, 0.2);
}

.box1 p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box2 p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .