Ir para conteúdo

POWERED BY:

Arquivado

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

Carlos Lino

Definir altura de fieldset dentro de uma tabela

Por , em Desenvolvimento frontend

Recommended Posts

Carlos Lino    0

Carlos Lino
Postado

Olá, estou com um problema que pe o seguinte. eu tenho uma tabela com 2 colunas, e em cada celula tenho um fieldset.

Não posso definir a altura deles. pois não sei a quantidad de informação que irão conter.

Mas cada um fica de um tamanho, preciso que os dois tenham a altura da celula, para que fiquem alinhados na base.

Alguem tem alguma idéia?

 

O código simplificado é este.

 

<html>
<head>
</head>

<body heigth="100%">

	<table>
		<tr valign="top" >
			<td>
				<fieldset>
					<legend>
						esquerda
					</legend>
					texto <br>
					texto <br>
					texto
				</fieldset>
			</td>
			<td>
				<div >
				<fieldset >
					<legend>
						direita
					</legend>
					texto
				</fieldset>
				<div>
			</td>
		</tr>
	</table>

</body>

</html>

 

Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Lino    0

Carlos Lino
Postado

Tipo, prq você alem de usar fieldset não usa div?

 

Olá estou usando fieldset porque é um formulário, e as informações são separadas por grupo.

Aí posso usar legend para rotular. Só por isso mesmo.

Eu já estou usando fieldset, mas os outros ficaram todos um embaixo do outro. agora tenho que fazer

duas colunas.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Lino    0

Carlos Lino
Postado

Usei div no lugar de tabelas, mas tive que manter um tamanho fixo na div de fora.

Alguem sabe uma solução melhor?

 

<html>
<head>
</head>

<body >
<div  style="height:100px;"  >
		<fieldset  style="position:relative; height:100%;  float:left;  width:200px; ">
			<legend>
				esquerda
			</legend>
		
			texto <br>
			texto <br>
			texto
				
		</fieldset>
		<fieldset style="position:relative; height:100%;  float:left;  width:200px; " >
			<legend>
				direita
			</legend>
	
			texto
					
		</fieldset>
	<div style="clear: both;"></div>
</div>				
	
</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Lino    0

Carlos Lino
Postado

Uma solução que encontrei foi com javascript

 

<html >
<head>
</head>
<script>
       function igualarTam(){
               var tam1 = document.getElementById('1').offsetHeight - 20;//aqui eu pego o tamanho do maior fildset que esta com nome de um
			   var tam2 = document.getElementById('2').offsetHeight - 20;//aqui eu pego o tamanho do maior fildset que esta com nome de um
			   var tam = 0;
			   if(tam1>=tam2)
				tam=tam1;
				else
					tam=tam2;
               document.getElementById("1").style.height = tam  + "px";         // forço o fildset para ficar naquele tamanho que ele capturou no tam
               document.getElementById("2").style.height = tam  + "px";         // forço o fildset para ficar naquele tamanho que ele capturou no tam
       }
</script>
<body >
<div  style=" border:1px solid">
               <fieldset id="2" style="position:relative;   float:left;  width:200px; ">
                       <legend>
                               esquerda
                       </legend>
                       
                       texto <br>
                       texto <br>
                       texto <br>
                       texto <br>
                       texto
                               
               </fieldset>
               <fieldset id="1" style="position:relative;  float:left;  width:200px; " >
                       <legend>
                               direita
                       </legend>
       
                       texto
                                       
               </fieldset>
       <div style="clear: both;"></div>
	   
</div>        
					<input type="button" value="igualar" onclick="igualarTam();"/>
       
</body>

</html>
<script>
       igualarTam()
</script>

a função pode ser chamada com o evento onload. mas eu estou usando isso jsp, e a página é um fragmento. daí não tem a tag <body>.

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Carlos Lino    0

Carlos Lino
Postado

1) Por que você está utilizando um <fieldset> em um elemento que não é um <form>? :mellow: Olha a semântica...

 

2) Outra, tentou definir a altura no <fieldset> como 100%? Não testei, é apenas uma sugestão... http://forum.imasters.com.br/public/style_emoticons/default/assobiando.gif

 

 

Olá, essa era uma página de teste, achei que não precisava de form. Na verdade estou programando em jsp. aí usei <h:form>.

 

Se eu colocar a altura em 100% ocupa a tela toda. Tudo bem, ficam do mesmo tamanho, mas eu queria que os dois tivessem a altura do mais alto deles.

 

Valeu pela dica.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

eu queria que os dois tivessem a altura do mais alto deles.

Faux Columns ?

 

http://forum.imasters.com.br/index.php?/topic/309442-solucao-para-faux-columns-sem-usar-imagens/

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito