Dica rápida: Como corrigir a quebra de layout da div com classe fieldWithErrors

Olá pessoal, depois de muito tempo sem postar nada, estou de volta com uma pequena porém interessante dica. Especialmente para você que não tem um designer para lhe ajudar ou que tem e não pode contar muito com ele, hehehe !

O problema:

Quando customizamos a aplicação, criamos nosso css, estilizamos tudo direitinho e depois de integrar o layout da aplicação e testarmos, nos debatemos com o seguinte problema: em nosso form, ao tentar gravar ou editar, o ActiveRecord identifica qual o erro de validação, em qual campo houve o problema. É incluído uma div com a classe fieldWithErrors para que este campo tenha um destaque, porém, se temos o layout com label e input na mesma linha, o div com a classe fieldWithErrors faz o input pular ir para a linha debaixo, quebrando assim o seu belo layout.

A solução:

Pesquisando um pouco no google, vi diversas soluções, onde o pessoal substituiu o div com o campo que continha o erro por um span e o problema então seria solucionado. Mas é claro que as coisas não funcionam de primeira, no meu caso, possuo um helper para exibição de mensagens de erros e lá possuo um método responsável por imprimir as mensagens, algumas pessoas utilizam os arquivos de configuração(environment.rb ou application.rb dependendo da versão de seu rails), mas não gosto muito dessa abordagem.

A solução seria apenas incluir:

ActionView::Base.field_error_proc = Proc.new { |html_tag, instance|”<span class=\”fieldWithErrors\”>#{html_tag}</span>” }

Mas Milk, você está utilizando Rails 3 agora esqueceu ? Como existe a questão de XSS Protection no Rails 3, devemos sempre chamar html_safe nos outputs e pronto, problema resolvido !

Espero que essa dica agilize a vida de vocês como agilizou a minha !