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>

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;
    } 
  }); 

});  

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.

1 Resposta 1

1

Substitua o css das class .contatoEsquerdo e .contatoDireito para o css abaixo:

.contatoEsquerdo, .contatoDireito {
    display: inline;
    vertical-align: top;
    padding: 0;
    margin: 0 auto;
}

ai é só setar o tamanho certinho do campo do jHtmlArea

4
  • Rapaz, funcionou! Obrigado. Tem como completar sua resposta com uma explicação maior de quando usar inline ou inline-block? É porque às vezes sou forçado á inline-block senão links por exemplo, não ganham corpo. E, quando reduzo o recipiente do menu, automaticamente as li's descem. O que não aconteceu com o JHtmlArea Commented 30/04/2016 às 0:34
  • A diferença é que o Inline vai renderizar o elemento na mesma linha dos outros elementos, com a menor largura possivel, ignorando assim definições e largura. O Inline-block vai renderizar também na mesma linha dos outros elementos mas com uma largura definida (caso não determine ele pode herdar de outro elemento). Commented 2/05/2016 às 11:22
  • Mas quando eu faço padding: 0; margin: 0 auto; eu não estou removendo todos os espaços? Commented 2/05/2016 às 11:53
  • Em um dos sentidos sim, mas um block sempre vai ocupar o espaço full de outro elemento block, mesmo ele não precisando de todo o espaço ele vai estar ali, ocupando ele. O inline não, ele vai ocupar o minimo de espaço possivel. Remover o padding e a margin não modifica o quanto o elemento vai ocupar de espaço dentro do elemento pai Commented 2/05/2016 às 11:56

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 .