Problem with textarea in fluid layout

Asked

Viewed 206 times

0

I got the following:

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

}

Good, on screen above 1000px all ok! But when playing for cell screen 320x480, then I can’t play the textarea down the other fields and it gets messy;

Please see this in http://www.dinamicaimoveis.com.br/novo/contato.php?acao=form

Detail: on screens above 1000px the error does not occur. Only with the textarea is giving this problem. With other elements (type li’s menu) does not occur. I mean, she doesn’t come down.

jquery css css3

1 answer

1


Replace the css of the class . contact . contact:

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

then just set the right size jHtmlArea field

  • Boy, it worked! Thank you. Can you complete your answer with a larger explanation of when to use inline or inline-block? It is because sometimes I am forced to inline-block or links for example, do not gain body. And when I reduce the menu container, the li’s automatically go down. What didn’t happen with Jhtmlarea

  • The difference is that Inline will render the element on the same line as the other elements, with the smallest possible width, thus ignoring definitions and width. Inline-block will render also on the same line as the other elements but with a defined width (if it does not determine it can inherit from another element).

  • But when I padde: 0; margin: 0 auto; I’m not removing all spaces?

  • In one sense yes, but a block will always occupy the full space of another block element, even if it doesn’t need all the space it will be there, occupying it. Not the inline, it’ll take up as little space as possible. Removing padding and margin does not change how much space the element will occupy within the parent element

Browser other questions tagged jquery css css3

You are not signed in. Login or sign up in order to post.