Rails Devise & Simple Form

我正试图使一个应用程序与Rails 4，设计和简单的形式。

设计视图有一个标准的记住我复选框，我正在尝试格式化它。

我读了一篇博客文章，向我展示了如何更改remember me字段的设计复选框对齐方式(作为标准，它将复选框推送到表单中其他字段的垂直对齐方式的左侧)。

为了解决这个问题，我修改了framework_and_overrides.css。SCSS包括:

.checkbox input[type="checkbox"] {
  margin-left: 0;
}

现在，当我尝试使用设计表单时，复选框出现在"记住我"标签中字母"R"的上方。

另外，我的css样式"remember me"不会应用于该文本。

我的领域目前有:

        <%= f.input :remember_me,  as: :boolean,  inline_label: true, :input_html => {:class => 'deviselabels'}, label: false if devise_mapping.rememberable? %>

我试图应用的样式是在'设计标签'类-它改变字体的颜色和大小。但是它不能在这个特定的表单元素上工作。它在表单中的其他元素上工作得很好，并且不改变外边距:

.deviselinks {
  font-family: 'Quicksand', sans-serif;
  color: white;
    a:link {text-decoration:none; background-color:transparent; color:white;};
    a:visited {text-decoration:none;background-color:transparent; color:white;};
    a:hover {text-decoration:none;background-color:transparent; color:white;};
    a:active {text-decoration:none;background-color:transparent; color:white;};
}

有谁知道如何移动单词'remember me'，使他们在复选框的左边(而不是'R'在复选框下面)?另外，我如何将我的字体样式应用到"记住我"这个词上?

整个新的会话表单是:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="devisetitle">Welcome back</div>
    </div>
  <%= simple_form_for(resource, as: resource_name, :html => {:id => "sign_in_user"}, url: session_path(resource_name)) do |f| %>

      <div class="row">
        <div class="col-md-3 col-md-offset-3">
          <div class="row">
            <div class="col-md-12">

              <%- if devise_mapping.omniauthable? %>
                  <div class="facebookauth">
                    <%= link_to "Login with Facebook", user_omniauth_authorize_path(:facebook) %>
                  </div>
              <% end -%>
            </div>
          </div>
          <div class="row">
            <div class="col-md-12">

              <%- if devise_mapping.omniauthable? %>
                  <div class="googleauth">
                    <%= link_to "Login with Google", user_omniauth_authorize_path(:google_oauth2) %>
                  </div>
              <% end -%>
            </div>
          </div>

          <div class="row">
            <div class="col-md-12">
              <%- if devise_mapping.omniauthable? %>
                  <div class="linkedinauth">
                    <%= link_to "Login with LinkedIn", user_omniauth_authorize_path(:linkedin) %>
                  </div>
              <% end -%>

            </div>
          </div>
        </div>


        <div class="col-md-5">
          <div class="emailform">
            <div class="form-inputs", style="margin-left: 7%">

              <%= devise_error_messages! %>

                <%= f.input :email, :label_html => {:class => 'deviselabels'}, placeholder: 'Enter email',  autofocus: true, :input_html => {:maxlength => 25, :size => 40, class: 'lineitemdevise'} %>
                <%= f.input :password, :label_html => {:class => 'deviselabels'},  placeholder: 'At least 8 characters', :input_html => {:maxlength => 15, :size => 40, class: 'lineitemdevise'} %>
                <%= f.input :remember_me,  as: :boolean,  inline_label: true, :input_html => {:class => 'deviselabels'}, label: false if devise_mapping.rememberable? %>
           </div>
            <div class="form-actions">
              <%= f.button :submit, "Login", :class => "dcpb" %>
            </div>
  <% end %>
  </div>

  </div>

  <div class="row">
    <div class="col-md-6 col-md-offset-3">
      <div class="loginredirect">
        <%= render "devise/shared/links" %>
      </div>
    </div>
  </div>
  </div>
</div>

您可以将标签文本移动到单独的标签标记中。例如:

<% if devise_mapping.rememberable? %>
  <%= f.label :remember_me, "Remember Me", class: 'deviselabels' %>
  <%= f.check_box :remember_me %>
<% end %>

这将使check_box出现在label之后。要使check_box出现在下面，只需在它们之间添加<br/>或将display: block;样式添加到它们之间。你可以使用deviselabels类来设置文本的样式。

编辑:

所以Simple Form是一个工具，使建立表单更容易。你的一行代码相当于我上面的四行，除了label和check_box被翻转。这样做的原因是，这是显示标签/复选框组合(复选框然后标签)的传统方式。

话虽如此，还有另一种方法可以实现这一目标，尽管在我看来，这种方法不那么"干净"。你可以给check_box的风格position: absolute，并发挥top的风格(即top: 20px)。您可能必须为父元素指定样式position: relative才能使其工作。就像我说的，不是那么干净，但它确实有效。

相关内容

最新更新

热门标签：