Foundation 5, Simple Form and Rails - 如何让“提示”CSS类工作

Question

我已经搜索了几天并进行了试验，但我无法获得要显示的简单表单 gem 提示 CSS 类。当您将鼠标悬停在表单输入上时，这只是一个显示表单输入提示的类。

我正在使用带有最新 simple_form gem 和基础 5 的 Rails 4.1。我已取消注释该行

b.use :hint, wrap_with: { tag: :span, class: :hint }

CSS 显示了我在表单中包含的提示，该提示包含在 Span class="hint" 中，但未应用我为该类提供的 CSS。

这个的CSS（实际上是SCSS）是：

.simple_form {
  .error {
    clear: left;
    color: black;
    display: block;
    margin-left: 120px;
  }
  .hint {
    clear: left;
    margin-left: 120px;
    color: #555;
    display: block;
    font-style: italic;
  }
}

样式丢失了，它只是在那儿无所事事。

这是完整的 CSS，我怀疑有人会想看它，但以防万一那里有善良的灵魂！

<main role="main">

       <h2>Sign up</h2>
<div class="form">
<form accept-charset="UTF-8" action="/users" class="simple_form new_user" id="new_user" method="post" novalidate="novalidate"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="p1yBwcId1CbmOJChdVQQht+OafY8aX+7i0U71SxdSbc=" /></div>


      <div class="form-inputs">
        <div class="input string required user_first_name"><label class="string required control-label" for="user_first_name"><abbr title="required">*</abbr> First name</label><input autofocus="autofocus" class="string required" id="user_first_name" name="user[first_name]" type="text" /></div>
        <div class="input string required user_last_name"><label class="string required control-label" for="user_last_name"><abbr title="required">*</abbr> Last name</label><input class="string required" id="user_last_name" name="user[last_name]" type="text" /></div>
        <div class="input email required user_email"><label class="email required control-label" for="user_email"><abbr title="required">*</abbr> Email</label><input class="string email required" id="user_email" name="user[email]" type="email" value="" /></div>
        <div class="input string required user_staff_id"><label class="string required control-label" for="user_staff_id"><abbr title="required">*</abbr> Staff ID</label><input class="string required" id="user_staff_id" name="user[staff_id]" type="text" /></div>
        <div class="input string required user_mobile"><label class="string required control-label" for="user_mobile"><abbr title="required">*</abbr> Mobile (with international dialing code. E.g. 07931xxxxxx = 447931xxxxxx)</label><input class="string required" id="user_mobile" name="user[mobile]" type="text" /></div>
        <div class="input password required user_password"><label class="password required control-label" for="user_password"><abbr title="required">*</abbr> Password</label><input class="password required" id="user_password" name="user[password]" type="password" /></div>
        <div class="input password required user_password_confirmation"><label class="password required control-label" for="user_password_confirmation"><abbr title="required">*</abbr> Password confirmation</label><input class="password required" id="user_password_confirmation" name="user[password_confirmation]" type="password" /></div>
        <div class="input string required user_pin field_with_hint"><label class="string required control-label" for="user_pin"><abbr title="required">*</abbr> 4 digit PIN</label><input class="string required" id="user_pin" name="user[pin]" type="text" /><span class="hint">Type a number in here</span></div>
        <div class="input string required user_pin_confirm field_with_hint"><label class="string required control-label" for="user_pin_confirm"><abbr title="required">*</abbr> Confirm PIN</label><input class="string required" id="user_pin_confirm" name="user[pin_confirm]" type="text" /><span class="hint">And the same number again</span></div>
      </div>

      <div class="form-actions">
        <input class="button" name="commit" type="submit" value="Sign up" />
      </div>
    </form>

非常感谢您能提供帮助 - 我很感激它非常具体；）

Answer 1

我知道这个问题来自的项目现在已经死了（正如@tentimes 所报告的那样），但我有这个工作并且有一些默认样式可能会在未来帮助其他人。

正如@tentimes 和@Thomas_Taylor 所提到的，使用提供的生成器很重要，如下所示：

rails generate simple_form:install --foundation

然后从 config/initializers/simple_form_foundation.rb

中取消注释以下行

b.use :hint,  wrap_with: { tag: :span, class: :hint }

最后一步是提供您自己的 CSS（如 simple_form documentation 中所述）。下面是我用的。它使用来自 Foundation global styles 的信息颜色 (#a0d3e8)，当带有提示的输入字段被鼠标悬停时，它具有很好的悬停效果。

# in framework_and_overrides.css.scss

.simple_form .field_with_hint input{
  margin-bottom: 0;
  &:hover~.hint{
    display: block;
  }
}

.simple_form .hint {
  display: none;
  padding: 0.375rem 0.5625rem;
  margin-bottom: 1rem;
  font-size: 0.75rem;
  font-weight: normal;
  font-style: italic;
  background: #a0d3e8;
  color: white;
}

Answer 2

当您运行简单的表单生成器时，您是否在末尾添加了 --foundation？文档 (https://github.com/plataformatec/simple_form) 内容如下：

要生成与 Zurb Foundation 5 兼容的包装器，请将基础选项传递给生成器，如下所示：

rails generate simple_form:install --foundation

您是否也做了以下事情：

请注意，Foundation 包装器默认不支持 :hint 选项。为了启用提示，请取消注释 config/initializers/simple_form_foundation.rb 中的相应行。您需要为提示提供自己的 CSS 样式。

希望对您有所帮助。