【问题标题】:simple_form date input not showing in same linesimple_form 日期输入未显示在同一行中
【发布时间】:2015-02-27 23:34:08
【问题描述】:

我的表单中有一个输入日期:

<%= simple_form_for @user, url:wizard_path, html: {class: 'form-horizontal'}, wrapper: :horizontal_input_group do |f| %>
    <%= f.simple_fields_for :educations do |b| %>
    <%= b.input :school_name %>
    <%= b.input :degree %>
    <%= b.input :year_started %>
    <%= b.input :year_finished %>
    <% end %>
    <%= f.button :submit, "Continue" %>
    or<%= link_to " Skip this step", next_wizard_path%>
    <% end %>

我的问题是日月和年输入不在同一行,而且看起来很难看(即显示 3 行,每行一个输入)。我认为 simple_form 的默认行为会在同一行显示日期输入,但我的不是。这在 simple_form 中正常吗? (专门用于日期输入)还是我需要通过 css 进行一些配置?请帮帮我:(

相关模型:

用户模型:

has_many :educations, dependent: :destroy
accepts_nested_attributes_for :educations

教育模式:

belongs_to :user

【问题讨论】:

  • 请同时展示您的相关型号。
  • 您好,感谢您的回复,我包含了模型,请查看我的编辑。
  • 我已经在 css 中尝试过,它工作正常,但它不是我的问题的正确解决方案,问题是我有这个模型嵌套,所以我在这里有一个动态表单来添加属性,(我跟随铁路广播 196)。我需要一种正确操作日期输入大小的方法,但我不知道如何修复它
  • 我也应该要求提供架构。那是凌晨 4 点,所以这是我的借口,我会坚持下去。咧嘴一笑。无论如何,请发布它。如果您也可以添加问题的屏幕剪辑,那也没有什么坏处。
  • 再次感谢您的回复,我想我已经解决了我的问题,请参阅我的回答。我现在的问题是我想将 margin-right: 设置为 select 的最后一个元素的 0。如果你知道如何请告诉我。谢谢

标签: ruby-on-rails twitter-bootstrap ruby-on-rails-4 simple-form


【解决方案1】:

环顾四周,找到了我的问题的答案here

我希望在不使用 css 的情况下解决这个问题,因为我认为 simple_form 有办法处理这类事情。

HTML:

<select id="user_educations_attributes_0_year_started_3i" name="user[educations_attributes][0][year_started(3i)]" class="date required form-control">

<select id="user_educations_attributes_0_year_started_2i" name="user[educations_attributes][0][year_started(2i)]" class="date required form-control">

<select id="user_educations_attributes_0_year_started_1i" name="user[educations_attributes][0][year_started(1i)]" class="date required form-control">

CSS:

.date.required.form-control{ 
display: inline-block;
width: 32%;
margin-right: 5px;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2015-08-09
    • 2013-11-14
    • 1970-01-01
    • 1970-01-01
    • 2020-05-02
    • 2019-08-19
    • 2021-11-19
    相关资源
    最近更新 更多