14
respostas

Alinhamento de campos no formulário

Referente ao curso Ruby on Rails 4: do zero à web, no capítulo Layouts e atividade Vídeo 4

por Anderson Luiz de Jesus Brazão.
| 56.5k xp | 23 posts
Consultor de Marketing

Olá amigos, eu criei um form e os campos ficaram desalinhados. Estou utilizando o bootstrap. Alguém poderia me ajudar? Isso ocorreu depois que eu utilizei o form-inline <%= form_for Assjur.new do |f| %>

<%= f.label :numero %> <%= f.text_field :numero, class: "form-control" %>
<%= f.label :nome %> <%= f.text_field :nome, class: "form-control"%>
<%= f.label :cnpj %> <%= f.text_field :cnpj, class: "form-control" %>
<%= f.label :presidente %> <%= f.text_field :presidente, class: "form-control" %>
<%= f.label :telefone %> <%= f.text_field :telefone, class: "form-control" %>
<%= f.label :celular %> <%= f.text_field :celular, class: "form-control" %>
<%= f.label :email %> <%= f.text_field :email, class: "form-control" %>
14 respostas
por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Oi Anderson, tudo bem? posta o código completo do formulário por favor. Posta também uma imagem em algum serviço de compartilhamento como o pasteboard.co pra gente entender o que seria o "desalinhamento" por favor?

por Anderson Luiz de Jesus Brazão.
| 56.5k xp | 23 posts
Consultor de Marketing

Segue o código comopleto

<!DOCTYPE html>

<%= form_for Assjur.new do |f| %>
<%= f.label :numero %> <%= f.text_field :numero, class: "form-control" %>
<%= f.label :nome %> <%= f.text_field :nome, class: "form-control"%>
<%= f.label :cnpj %> <%= f.text_field :cnpj, class: "form-control" %>
<%= f.label :presidente %> <%= f.text_field :presidente, class: "form-control" %>
<%= f.label :telefone %> <%= f.text_field :telefone, class: "form-control" %>
<%= f.label :celular %> <%= f.text_field :celular, class: "form-control" %>
<%= f.label :email %> <%= f.text_field :email, class: "form-control" %>
<%= f.label :regiao %> <%= f.text_field :regiao, class: "form-control" %>
<%= f.submit "Criar Associação Jurídica", class: "btn btn-primary"%>
<% end %>
por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Anderson, sem a imagem não dá pra entender o que quis dizer com desalinhado. Mas faz o seguinte, agrupa os labels e inputs dentro de uma div com a classe form-group. Ex:

<div class="form-group">
  <%= f.label :regiao %> 
  <%= f.text_field :regiao, class: "form-control" %>
</div>
por Anderson Luiz de Jesus Brazão.
| 56.5k xp | 23 posts
Consultor de Marketing

Como eu conseguiria colocar uma imagem aqui? Isso que você sugeriu eu já havia tentado e infelizmente não deu certo. Obrigado.

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Arrasta a imagem pra página desse site e clica em upload, ele vai gerar um link e o link você pode colar aqui: http://pasteboard.co/

por Anderson Luiz de Jesus Brazão.
| 56.5k xp | 23 posts
Consultor de Marketing

Oi, obrigado pela ajuda que está me proporcionando. Está sendo muito importante.

A imagem está lá: https://cdn.pbrd.co/images/6c5KQc49l.jpg

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Anderson, você utilizou o form-group que comentei no post anterior?

por Anderson Luiz de Jesus Brazão.
| 56.5k xp | 23 posts
Consultor de Marketing

Boa tarde. Sim utilizei. Veja o código:

<%= f.label :numero %> <%= f.text_field :numero, class: "form-control" %>
<%= f.label :nome %> <%= f.text_field :nome, class: "form-control"%>
<%= f.label :cnpj %> <%= f.text_field :cnpj, class: "form-control" %>
<%= f.label :presidente %> <%= f.text_field :presidente, class: "form-control" %>
<%= f.label :telefone %> <%= f.text_field :telefone, class: "form-control" %>
<%= f.label :celular %> <%= f.text_field :celular, class: "form-control" %>
<%= f.label :email %> <%= f.text_field :email, class: "form-control" %>
<%= f.label :regiao %> <%= f.text_field :regiao, class: "form-control" %>
por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Anderson, não utilizou não, era pra ter ficado assim ó:

<div class="form-control">
  <%= f.label :numero %> 
  <%= f.text_field :numero, class: "form-control" %>
</div>
<div class="form-control">
  <%= f.label :nome %> 
  <%= f.text_field :nome, class: "form-control"%>
</div>
<div class="form-control">
  <%= f.label :cnpj %> 
  <%= f.text_field :cnpj, class: "form-control" %>
</div>
<div class="form-control">
  <%= f.label :presidente %> 
  <%= f.text_field :presidente, class: "form-control" %>
</div>
<div class="form-control">
  <%= f.label :telefone %> 
  <%= f.text_field :telefone, class: "form-control" %>
</div>
<div class="form-control">
  <%= f.label :celular %> 
  <%= f.text_field :celular, class: "form-control" %>
</div>
<div class="form-control">
  <%= f.label :email %> 
  <%= f.text_field :email, class: "form-control" %>
</div>
<div class="form-control">
  <%= f.label :regiao %> 
  <%= f.text_field :regiao, class: "form-control" %>
</div>

Testa assim e manda o print de como ficou se não tiver resolvido.

por Anderson Luiz de Jesus Brazão.
| 56.5k xp | 23 posts
Consultor de Marketing

meu código está igual, com exceção do "inline". Veja só:

<div class="form-inline">
    <div class="form-group">
        <%= f.label :numero %>
        <%= f.text_field :numero, class: "form-control"  %>
    </div>
    <div class="form-group">
        <%= f.label :nome %>
        <%= f.text_field :nome, class: "form-control"%>
    </div>
</div>

Depois que eu utilizei o INLINE ele desalinhou como você viu.

Obrigado pela ajuda.

por Anderson Luiz de Jesus Brazão.
| 56.5k xp | 23 posts
Consultor de Marketing

Meu código inteiro está assim:

<!DOCTYPE html>
<html>
<head>
    <title>Cadastro de Associações Jurídicas</title>
</head>
<body>
<%= form_for Assjur.new do |f| %>
<div class="form-inline">
    <div class="form-group">
        <%= f.label :numero %>
        <%= f.text_field :numero, class: "form-control"  %>
    </div>
    <div class="form-group">
        <%= f.label :nome %>
        <%= f.text_field :nome, class: "form-control"%>
    </div>
</div>
<div class="form-inline">
    <div class="form-group">
        <%= f.label :cnpj %>
        <%= f.text_field :cnpj, class: "form-control" %>
    </div>
    <div class="form-group">
        <%= f.label :presidente %>
        <%= f.text_field :presidente, class: "form-control" %>
    </div>
</div>

<div class="form-inline">
    <div class="form-group">
        <%= f.label :telefone %>
        <%= f.text_field :telefone, class: "form-control" %>
    </div>
    <div class="form-group">
        <%= f.label :celular %>
        <%= f.text_field :celular, class: "form-control" %>
    </div>
    <div class="form-group">
        <%= f.label :email %>
        <%= f.text_field :email, class: "form-control" %>
    </div>
</div>
<div class="form-inline">
<div class="form-group">
    <%= f.label :regiao %>
    <%= f.text_field :regiao, class: "form-control" %>

</div>
<%= f.submit "Criar Associação Jurídica", class: "btn btn-primary"%>
</div>
<% end %>
</body>
</html>
por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Anderson, desculpa a demora, mas como você quer que esse formulário fique? Manda a imagem pra eu acompanhar melhor? Tá usando o form-inline para que cada grupo fique um ao lado do outro?

por Anderson Luiz de Jesus Brazão.
| 56.5k xp | 23 posts
Consultor de Marketing

Wanderson, bom dia. Sim, estou usando o form-inline para que fique mais compactado e alinhado. Conforme a imagem mostra as caixas de texto estão fora de linha e muito próximas umas das outras.

por Wanderson Macêdo
| 3960.2k xp | 8086 posts
Instrutor Desenvolvedor

Então Anderson, caso você use o form-inline os campos serão alinhados um ao lado do outro. Quanto ao espaçamento, acredito que terá que lidar com isso com suas próprias linhas de CSS. Caso esteja querendo alinhar horizontalmente os elementos, há uma terceira alternativa. Usar a classe form-horizontal mas isso vai lhe exigir trabalhar um pouco com as classes de grid. Veja na documentação um exemplo:

http://getbootstrap.com/css/#forms-horizontal

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software