f.date_select框的大小较小

Question

我正在将Twitter的'f_date_select'与Twitter Boostrap一起使用，结果如下所示。但是，我希望选择框更小（大小的一半）。

我该怎么做？

<%= f.label :start_date, :class => "control-label"%>
<%= f.date_select :start_date, :prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }  %>
<%= f.label :end_date, :class => "control-label"%>
<%= f.date_select :end_date, :prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }  %>

Answer 1

他们从bootstrap中的select元素获取宽度：

select {
  width: 220px;
  border: 1px solid #cccccc;
  background-color: #ffffff;
}

要修复，请在替换文件的底部添加您自己的文件：

select.date-select {
    width:auto;
    border: 1px solid #cccccc;
    background-color: #ffffff;
}

下一个问题是将类应用于date_select元素。如果你只是抛出：class =＆gt;在那里“日期选择”，Rails无法识别您正在尝试使用这两个选项和html_options。相反，您必须将每个传递为散列：

<%= f.date_select :start_date, {:prompt => { :day => 'Select day', :month => 'Select month', :year => 'Select year' }}, {:class => 'date-select'}  %>

这会将您的班级日期选择应用于生成的三个选定对象中的每一个。

Answer 2

从内存中，样式选择框是一场噩梦，因为它们更像是浏览器组件（即，它们在不同的浏览器中呈现不同，无论样式如何）。

由于您使用的是Bootstrap，但您可以使用their jQuery dropdown component并根据需要设置样式。

您必须调整Rails代码以适应。