【问题标题】:adding CSS to rails form helper将 CSS 添加到 Rails 表单助手
【发布时间】:2017-11-01 05:35:47
【问题描述】:

我想在 Rails 表单助手中添加一个 CSS 类。不过,css 类旨在用于输入标签周围的 div 中。我猜这就是为什么没有对滑块应用样式的原因。

表格内的原始语法:

<div class="range range--light">
          <input type="range" data-init="auto" id="slider3" min="0" max="100" value="<%= @subproject_value1 %>" step="1">
          <output for="slider3">0</output>
</div>

markup

表单标签内的Rails表单助手:

<%= range_field(:subproject, :ans1, in: 1..100, :class => "range range--light") %>

form helper

编辑: 添加图片

【问题讨论】:

    标签: css ruby-on-rails


    【解决方案1】:

    如果您需要围绕输入的 div,那么您只需在模板中标记它并在其中包含实际的表单助手:

    <div class="range range--light">
        <%= range_field(:subproject, :ans1, in: 1..100, id: 'slider3'%>
        <output for="slider3">0</output>
    </div>
    

    【讨论】:

    • 谢谢,我不知道您可以在表单标签中使用常规标记。不过,它仍然没有设置样式。
    • 我不确定您使用的样式库是什么。您是否确保 css 和 js 文件都在资产管道中并作为源出现在调试控制台中?此外,如果涉及 JS,您可能需要先启动它。如果没有更多信息,这很难找到。
    • 这是一个自定义的内部库。所有资产都在正确的目录中,并在调试中显示为源。
    • 有机会在这里发布资产吗?
    • 所以,从我从 css 中可以看出,很可能涉及到一些 JS 来创建内部范围替换标记。在您的控制台中,如果您检查该字段,您应该能够看到一个带有“range-container”类的 div。否则你只是错过了 JS。
    【解决方案2】:

    我只需将:'data-init' =&gt; 'auto' 添加到range_field 标签

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2012-04-01
      • 2014-01-26
      • 1970-01-01
      • 1970-01-01
      • 2022-12-18
      • 2020-01-27
      • 2017-08-08
      • 1970-01-01
      相关资源
      最近更新 更多