Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mzaidan

Css dinâmico

Recommended Posts

Prezados, possuo o seguinte código:

.balaodialogo {
position: relative;
background-color: #D3D3D3;
border-radius: 20px;
width: 600px;
height: 200px;
line-height: 20px; /* vertically center */
color: white;
text-align: left;
word-wrap: break-word;
}

E para exibir:

<div class='balaodialogo'><font color='#000'>" + mensagem + "</font></div>

Onde o "mensagem" eu puxo de um banco de dados.

 

O problema está exatamente ai.

Se a mensagem for muito grande, ultrapassa o balão.

Então, pensei em colocar o height: dinânico, no momento em que escrevo o div

 

Assim, como eu escreveria na propria div o style height?

 

Grato.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Consegui aqui:

<div class='balaodialogo' style='height:600;'>  <font color='#000'>" . $mensagem['mensagem'] . "</font></div><br>";
                

Compartilhar este post


Link para o post
Compartilhar em outros sites

A forma mais prática é fazer a altura do elemento se adaptar, utilizando a técnica 'clearfix':

.clearfix:before,
.clearfix:after {
	content: " ";
  	display: table;
}
.clearfix:after {
	clear: both;
}

Adicione esta classe ao seu elemento, e seu problema certamente se resolverá.

Abs.

Compartilhar este post


Link para o post
Compartilhar em outros sites

"clearfix" serve para adaptar altura? :o :blink:

 

Sim quando o elemento comporta elementos flutuantes, o que eu achei que estava acontecendo.

Não prestei a atenção que ele tem um height fixo definido e que se trata de um simples texto. :unsure:

 

@mzaidan

 

Você só precisa definir uma altura mínima:

.balaodialogo {
  position: relative;
  background-color: #D3D3D3;
  border-radius: 20px;
  width: 600px;
  min-height: 200px; /* <<<<<< */ 
  line-height: 20px;
  color: white;
  text-align: left;
  word-wrap: break-word;
}

Desta forma caso seja necessário, a altura irá exceder automaticamente.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Caraleo.

Passei a tarde toda tentando e já havia desistido.

Sorte que o forum tava aberto e eu vim ver isso.

Valeu, mestre.

Era exatamente isso da altura minima que eu estava precisando.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.