将高度添加到rails搜索字段标记

Question

我在设置导轨search_field_tag的高度时遇到了麻烦，我所做的一切似乎都没有改变输入框的实际高度，我知道这可以做到但我跑到墙上，提前谢谢！

ERB：

<%= form_tag spree.products_path, method: :get, id: 'top-search-form',  do %>
  <%= search_field_tag :keywords, params[:keywords], id:'search_field', size: 15, maxlength: 128, placeholder: "Search" %>
  <%= submit_tag t(:search), class: 'search_b', name: nil, value: '' %>
<% end %>

CSS

.search_field {
    background: url(<%= asset_path 'store/bg_search.png' %>) no-repeat;
    float: left;
    padding: 4px;
    margin: 7px 0 0 15px;
}

input#search_field {
    border: 0 none;
    width: 147px;
    font-style: normal;
    background-color:transparent;
    margin-top:-4px;
    color: #454545;
    float: left;
}

input.search_b,
input.search_b:hover {
    vertical-align: top;
    display: block;
    float: left;
    border: 0;
}

Answer 1

您可以改用text_field标签。见截图

<%=text_field_tag :age, value = nil, options = {style:"height:100px;border-radius:25px;", placeholder:"search"}%>

search_field_tag与text_field标签

具有相同的参数

as http://apidock.com/rails/ActionView/Helpers/FormTagHelper/text_field_tag表示选项可以接受其他参数“任何其他键都可以为标记创建标准HTML属性。”

<强> UPD dhaile是对的。您的输入#search_field 选择器中实际上没有高度。

Answer 2

<%= form_tag spree.products_path, method: :get, id: 'top-search-form', do %>  有尾随逗号，删除：   <%= form_tag spree.products_path, method: :get, id: 'top-search-form' do %>尝试一下，它适用于我这个定制的SCSS：

form#top-search-form{ height:5em;
    input#search_field{height:4em;
    }

}

Answer 3

在CSS中，您使用的是.search_field {...}但我在ERB中没有看到该类。也许您可以尝试更改高度或填充该字段。

Answer 4

＆lt;％= text_field_tag：q，''，size：8，style：“font-size：1.0em”％＆gt;应该工作'options =“不需要。

“style：”font-size：1.0em“代码成为HTML选项。不需要在单词样式之前的'options =”。你可以使用你喜欢的任何允许的HTML字体大小选项，小，大，％，px等。

如果你在代码中留下'options ='，那么Rails会忽略它。