Layout Fluido: Problema com textarea

29/04/2016

0

tenho o seguinte html:
    <div class="sessoes">
    <div class="formContato">
      <h1 class="h1Centralizado">Fale Conosco</h1>
      <form id="contato" action="contato.php" method="post">
        <input type="hidden" name="acao" value="enviar" />
        <br />
        <div class="contatoEsquerdo">
          <label class="labelPequeno" style="color:#FFF;">Assunto</label>
          <select style="width: 212px; height:52px;" id="assunto" name="assunto" required>
            <option value="">Escolha o assunto</option>
            <option value="1">Quero Comprar</option>
            <option value="2">Quero Vender</option>
            <option value="3">Informação sobre Imóvel</option>
            <option value="4">Elogio</option>
            <option value="5">Outro</option>
          </select>
          <br />
          <br />
          <div class="qual" style="display:none">
            <label class="labelPequeno" style="color:#FFF;">Qual?</label>
            <input type="text" class="typeTextMedio" maxlength="200" id="qual" name="qual" />
            <br />
            <br />
          </div>
          <label class="labelPequeno" style="color:#FFF;">Nome</label>
          <input type="text" class="typeTextMedio" maxlength="200" id="nome" name="nome" required />
          <br />
          <br />
          <label class="labelPequeno" style="color:#FFF;">Telefone</label>
          <input type="tel" class="typeTextMedio" maxlength="14" id="telefone" name="telefone" />
          <br />
          <br />
          <label class="labelPequeno" style="color:#FFF;">Email</label>
          <input type="email" class="typeTextMedio" required maxlength="200" id="email" name="email" />
          <br />
          <br />
        </div>
        <div class="contatoDireito">
          <h1 style="text-align:center; width:100%;">Descrição</h1>
          <br />
          <textarea name="descricao" id="descricao" cols="60" rows="15"></textarea>
          <br />
          <br />
        </div>
        <div style="clear:both; width:100%; text-align:center;">
          <input type="submit" value="Enviar" />
          <br />
          <br />
        </div>
      </form>
    </div>
    <div style='text-align:center'><a href='javascript:history.go(-1)'><img src='_img/voltar.png' title='Voltar' /></a><br />
      <br />
    </div>

e o JQuery


    // JavaScript Document
    $(document).ready(function() {
    	
      $("#assunto")
    	.change(function () {
    		if(this.value == 5) {
    			  $(".qual").css("display", "block");
    			  $("#qual").prop("required",true);
    		} else {
    			  $(".qual").css("display", "none");
    			  $("#qual").prop("required",false);
    		}	  
      })
    
    
      $("#descricao").htmlarea();  
    
    
      $("#contato").on("submit", function (){
    	if($('#descricao').val() == "")   {     //verifica apena o texto
    		alert("Descrição não está preenchida!");
    		$('#descricao').siblings().each(function(){
    		  if ($(this).children('iframe').length){
    			 var iframe=$(this).children('iframe')[0];
    			 iframe.contentWindow.focus();
    		  }
    	   });
    	   return false;
    	} 
      }); 
      
    });  

e o CSS



    .sessoes
    {	
    	/*width: 97.65625%;*/
    	width:1000px;
    } 
    
    .contatoEsquerdo, .contatoDireito {
    	display:inline-block;
    	vertical-align:top;
    	padding:0; 
    	margin:0 auto;
    }
    
    .contatoEsquerdo {
    	width:40%; 
    }
    
    .contatoDireito {
    	width:58%; 
    }
    
    @media screen and (min-width: 0px) and (max-width:320px)  {
    
    	.contatoEsquerdo, .contatoDireito, {
    		width:100%;
    	}
    	
    	.textarea {
    		width:auto;
    	}
    
    }


Bom, em tela acima de 1000px tudo ok! Mas quando jogo para tela de celular 320x480, então não consigo jogar a textarea para baixo dos outros campos e fica uma bagunça;

Por favor, vejam isso em http://www.dinamicaimoveis.com.br/novo/contato.php?acao=form

Detalhe: em telas acima de 1000px o erro não ocorre. Apenas com a textarea esta dando este problema. Com outros elementos (tipo li's de menu) não ocorre. Ou seja, ela não desce.
Carlos Rocha

Carlos Rocha

Responder

Assista grátis a nossa aula inaugural

Assitir aula

Saiba por que programar é uma questão de
sobrevivência e como aprender sem riscos

Assistir agora

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar