1. ホーム
  2. jquery-ui

[解決済み】jQuery DatePickerコントロールのサイズを変更する方法

2022-04-20 20:45:34

質問

jQuery DatePicker コントロールを初めて使用します。フォーム上で動作するようになりましたが、サイズが2倍ほど大きく、jQuery UIページのデモと比べると1.5倍ほどの大きさになっています。サイズをコントロールするために、私が見逃している何か簡単な設定があるのでしょうか?

編集する 手がかりは見つかったのですが、新たな問題が出てきました。CSSファイルには、親要素のフォントサイズに応じてコンポーネントが拡大縮小されることが書かれています。彼らは、次のように設定することを推奨しています。

body {font-size: 62.5%;}

で1em=10pxになるようにします。こうすることで、きれいなサイズのdatepickerが得られますが、明らかに私のサイトの他の部分が台無しになります(現在、font-size: .9emを使用しています)。

テキストボックスをDIVで囲み、そのフォントサイズを設定してみましたが、無視されるようです。だから、その親のフォントを変更することによってdatepickerを縮小する方法があるはずですが、私のサイトの残りの部分を台無しにせずにそれを行うにはどうすればよいのでしょうか?

解決方法は?

jquery-ui の css ファイルで変更する必要はなく(デフォルトのファイルを変更すると混乱することがあります)、以下のように追加すれば十分です。

div.ui-datepicker{
 font-size:10px;
}

ui-filesの後に読み込まれるスタイルシートの中で

div.ui-datepicker は、ui-widget が ui-datepicker の後に宣言されている場合に必要です。