如何将simple_form配置为内联日期时间元素? Zurb基金会

时间:2014-05-27 06:10:07

标签: zurb-foundation

我的问题很简单。我不能为我的生活弄清楚如何内联simple_form日期时间输入字段。它真的让我很烦恼。我尝试了几种方法,但似乎没有任何效果。对于初学者,我已经阅读了简单形式的文档而没有任何内容。从文档中,我试过这个:

<legend>Start Time</legend>
  <div class="row">
    <div class="medium-3 columns"><%= f.input :start, label: false, as: :date, date: :inline %></div>
  </div>
  <div class="row">
    <div class="medium-3 columns"><%= f.input :start, label: false, as: :time, time: :inline  %></div>
  </div>

没有

我已使用此答案中的CSS实现此代码作为解决方法。 CSS workaround

这不是我想要做的,因为该表单在不同的浏览器上是可怕的。

最后,我认为我的答案是在初始化文件中显示的简单表单:

config.wrappers :default, class: :input,
hint_class: :field_with_hint, error_class: :field_with_errors do |b|
## Extensions enabled by default
# Any of these extensions can be disabled for a
# given input by passing: `f.input EXTENSION_NAME => false`.
# You can make any of these extensions optional by
# renaming `b.use` to `b.optional`.

# Determines whether to use HTML5 (:email, :url, ...)
# and required attributes
b.use :html5

# Calculates placeholders automatically from I18n
# You can also pass a string as f.input placeholder: "Placeholder"
b.use :placeholder

## Optional extensions
# They are disabled unless you pass `f.input EXTENSION_NAME => :lookup`
# to the input. If so, they will retrieve the values from the model
# if any exists. If you want to enable the lookup for any of those
# extensions by default, you can change `b.optional` to `b.use`.

# Calculates maxlength from length validations for string inputs
b.optional :maxlength

# Calculates pattern from format validations for string inputs
b.optional :pattern

# Calculates min and max from length validations for numeric inputs
b.optional :min_max

# Calculates readonly automatically from readonly attributes
b.optional :readonly

## Inputs
b.use :label_input
b.use :hint,  wrap_with: { tag: :span, class: :hint }
b.use :error, wrap_with: { tag: :span, class: :error }
end

# The default wrapper to be used by the FormBuilder.
config.default_wrapper = :default

# Define the way to render check boxes / radio buttons with labels.
# Defaults to :nested for bootstrap config.
#   inline: input + label
#   nested: label > input
config.boolean_style = :nested

问题是我从哪里开始。我找到了相关的主题,但都是关于Bootstrap的。非常感谢帮助。谢谢。

0 个答案:

没有答案