5

Twitter BoostrapでRailの「f_date_select」を使用しているため、次のようになります。ただし、選択ボックスを小さくしたい（約半分のサイズ）。

これどうやってするの？

<%= 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' }  %>

4

2 に答える 2

10

ブートストラップの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 => "date-select"をスローすると、Railsはoptionsとhtml_optionsの両方を使用しようとしていることを認識しません。代わりに、それぞれをハッシュとして渡す必要があります。

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

これにより、生成された3つの選択オブジェクトのそれぞれにクラスの日付選択が適用されます。

于 2013-02-17T20:45:30.447 に答える
1

メモリから、選択ボックスのスタイリングは、ブラウザコンポーネントに似ているため、悪夢です（つまり、スタイリングに関係なく、ブラウザごとにレンダリングが異なります）。

Bootstrapを使用しているので、jQueryドロップダウンコンポーネントとスタイルを好きなだけ使用できます。

それに合わせてRailsコードを調整する必要があります。

于 2013-02-14T02:03:34.467 に答える