Layout Fluido: Problema com textarea
29/04/2016
0
tenho o seguinte html:
e o JQuery
e o CSS
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.
<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
Curtir tópico
+ 0
Responder
Clique aqui para fazer login e interagir na Comunidade :)