School of Net

Evolua constantemente, Online

Membros SON


Alinhando campos do formulário -

CSS,Desenvolvimento,Design,Webstandards — Tags: , , , — Wesley Willians @ 13:23

Olá amigos,

Gostaria de passar uma dica rápida para você que trabalha com formulários, mas tem AQUELE trabalhão para conseguir alinhá-lo, principalmente, quando é questão de honra NÃO usar tabelas.

Normalmente para formulários, trabalhamos com labels, logo, as vezes com uma pequena ajuda da jquery, isso pode ser facilmente ajustado.

Veja o exemplo abaixo:





Perceba que set tivermos um formulário gigante, realmente as vezes com CSS o trabalho é árduo, logo, com uma pequena rotina em JQuery, tudo pode mudar, quase que magicamente.

Veja a solução encontrada quando estava navegando na Internet (perdi o site de referência, assim que achar posto aqui ok?).

var max = 0;
$("label").each(function(){
        if ($(this).width() > max)
            max = $(this).width();
    });
    $("label").width(max);

Se não caiu a sua ficha ainda, essa pequena função faz o seguinte: Pega a maior label do formulário e aplica esse tamanho para todas as outras, logo, tudo ficará alinhado. Essa solução para mim foi genial, quando me deparei com diversos checkboxes em uma parte de meu formulário.


5 Comentários »

  1. Na CSS é mais facil, apenas colocar
    label { display:block; width:150px; float:left; }

    Pronto ‘-’

    Comentário by Cezar — 19/09/2010 @ 4:18

  2. Não Cezar, Imagine que você diversos campos, com labels de tamanhos totalmente diferentes.
    E se a label for maior que 150?

    Comentário by Wesley Willians — 19/09/2010 @ 10:29

  3. Onde essa rotina é executada? Como a executo? Grato.

    Comentário by Rodrigo — 05/11/2010 @ 20:46

  4. Via JQuery normalmente, depois que a página for carregada.

    Comentário by Wesley Willians — 05/11/2010 @ 20:47

  5. Vei, pode fazer o seguinte coloca no css.
    input {
    display:block;
    float:right;
    }
    assim o campo de preencher fica alinhado certinho eu testei aki.abraços

    Comentário by Diego — 11/01/2012 @ 20:59

Feed RSS para comentários sobre este post. TrackBack URL


Deixe um comentário