Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Helper button_to quebrando layout do bootstrap

Referente ao curso Ruby on Rails 4: do zero à web

por paulo
| 164.1k xp | 6 posts

Fala aí, galera! Estou tendo uma dificuldade enorme em acertar o layout do campo de pesquisa do primeiro vídeo da aula 10.

Notei que o button_to do rails, cria uma tag button dentro de uma div, o que ocasiona a quebra do layout da classe navbar-form do bootstrap. O meu botão de "Buscar" não fica alinhado horizontalmente com o campo de jeito nenhum!

Alguém passou por isso também? Tem uma solução?

Segue o trecho do código referente ao problema: 

<%= nav_bar brand: "Kunstee", brand_link: root_url do %>
        <%= form_tag busca_produto_path, class: "navbar-form navbar-right" do %>
            <div class="form-group">
                <%= text_field_tag :nome, nil, class: "form-control" %>
                <%= button_to "Buscar", nil, class: "btn btn-default" %>
            </div>
        <% end %>
    <% end %>

Obrigado, gente!

5 respostas
por Joviane Fernandes Jardim
| 587.1k xp | 1013 posts
Instrutor Desenvolvedora e Instrutora

Paulo,

Provavelmente ele não tá colocando sua classe no css. Coloca o method no form_tag pra ele entender que o class fica no último hash:

    <%= form_tag busca_produto_path, method: :get, class: "navbar-form navbar-right" do %>

Abraço!

por paulo
| 164.1k xp | 6 posts

Olá, Joviane! Já havia feito esse teste também.. e não tive sucesso!

Suspeitei do problema ser no button_to, pois ao substituí-lo por uma tag button, a quebra de layout não ocorre..Notei que o button_to gera o button dentro de uma div. Suspeito que a quebra do layout seja por conta disso..

por Joviane Fernandes Jardim
| 587.1k xp | 1013 posts
Instrutor Desenvolvedora e Instrutora

Bem estranho, aqui está funcionando com o method. Meu código está assim:

  <%= nav_bar brand: "Kunstee", brand_link: root_path do %>
    <%= form_tag busca_produto_path, method: :get, class: "navbar-form navbar-right" do %>
      <div class="form-group">
        <%= text_field_tag :nome, nil, class: "form-control" %>
        <%= button_to "Procurar", nil, class: "btn btn-default" %>
      </div>
    <% end %>
  <% end %>
por paulo
| 164.1k xp | 6 posts

Putz! Muito estranho mesmo.. Os nossos códigos estão iguais. Você poderia mostrar o HTML gerado nesse trecho da tela?

solução!
por paulo
| 164.1k xp | 6 posts

Consegui solucionar a quebra do layout de uma forma que talvez não seja a ideal. Mas, não encontrei outra..

Tive que incluir esse CSS na minha página:

    .navbar-form .form-group div {
          display: inline-block;
        width: auto;
        vertical-align: middle;
      }

O button_to gera a tag dentro de uma div e ela estava quebrando o alinhamento do navbar.

Obrigado pela ajuda!