Frontend

Alinhando campos do formulário

Por em

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.