CODEWITHSUNDEEP
htmlcssruby-on-rails
Marc Fletcher
Marc Fletcher

Reputation: 1082

Rails styling form tag with materialize css

I am trying to basically add the search bar style from materialize css (shown below), and apply to to the form_tag I've drafted in rails. I tried simply inserting the rails block in between the label and the i class, and while the style was mostly correct, the search function was lost, as each query resulted a rescue call being made (not shown here).

Materialize Css

<nav>
    <div class="nav-wrapper">
      <form>
        <div class="input-field">
          <input id="search" type="search" required>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
        </div>
      </form>
    </div>
</nav>

Rails Code

<%= form_tag "/pages/home", method: "get" do %>
  <%= label_tag(:q, "Search for:") %>
  <%= text_field_tag(:q) %>
  <%= submit_tag("Search") %>
  <p>You searched:</p>
  <%= params["q"] %>
<% end %>

Upvotes: 1

Views: 524

Answers (1)

Victor Mutai
Victor Mutai

Reputation: 11

The question was posted 9 months ago but I'll leave this here just in case someone else bumps into the same problem. This is how I would change Materialize css to rails erb.

<nav>
  <div class="nav-wrapper">
    <%= form_tag pages_path, :method => 'get' do %>
        <div class="input-field">
          <%= search_field_tag :search, params[:search], id: "search" %>
          <label for="search"><i class="material-icons">search</i></label>
          <i class="material-icons">close</i>
      </div>
    <% end %>
  </div>
</nav>

Upvotes: 1

Related Questions