web-dev-qa-db-ja.com

jQueryUI DatePickerのスタイル

私はjquery datepicker（ http://jqueryui.com/demos/datepicker/ ）を使用しています。

デモページの日付ピッカーは小さくコンパクトです。しかし、自分のサイトで日付ピッカーを使用すると、カレンダーが巨大になります。私は、各日付が12 ptフォントを使用していると推定します。

日を短くするにはどうすればよいですか？

jquerycoding-styledatepicker
26
Villager

簡単な答え：CSSのフォントサイズを ".ui-datepicker"に追加できます。

しかし、あなたはいくつかのcssルールが矛盾していると思います。これが当てはまるかどうかを確認するには、Pauloのリンクのメソッドを使用する必要があります。

24
MrHus

これは少し遅れますが、将来の参照のみのために、jquery ui css参照の後のの間に追加してください。

<style type="text/css">
    .ui-datepicker { font-size: 9pt !important; }
</style>

そしてそれは小さくなります。

11
Joseph Lee

jquery.ui.theme.cssの一番上の行のフォントサイズは次のとおりです。

.ui-widget { font-family: Trebuchet MS, Tahoma, Verdana, Arial, sans-serif; font-size: .9em; }

10
Clay

どのCSSルールも競合していません-100％の信頼でこれを確認できます！

これは、jQueryのデモページが誤解を招く可能性があるためです。セスが言ったように、彼らのページにはデフォルトのライブラリCSSに加えて多くの追加のCSSルールが追加されています。ここを見ると：

http://jqueryui.com/demos/demos.css

ベースフォントサイズがかなり小さくなっていることがわかります。これが本当の原因です。

私も同じ問題を抱えていて、ページ上でデモよりもはるかに大きな日付ピッカーが表示されていました。それが[〜＃〜]彼ら[〜＃〜]CSSであったことを確認するために、私はWeb開発者ツールバーのCSSメニューを使用しましたFirefoxで上記のCSSファイルのみを無効にすると、突然、それらのデモサイトのすべてに、私のものと同じサイズの大きな日付ピッカーがありました。

したがって、ここでの最良の答えは正しくありません-それはあなたの側では何もありません-それは完全に彼らがベースサイズをどのように減らしたかです私がここで述べたことを試しても、同じことが見つかることを保証します。

9
Lev

jQuery UIには テーマローラー があり、ダウンロードする前に、フォント、色、背景など、既存のテーマの1つをカスタマイズできます。コーナー半径、マージン、パディングの設定など、他のこともできます。

私はできる限りカスタマイズすることをお勧めしますbeforeダウンロードすることで、サイトで使用する際の手間を省くことができます。

ページ全体にデフォルトのフォントサイズなどを設定することを忘れないでくださいafter jQuery UIスタイルシートを呼び出しました。

5
eksith

デモページには、パッケージ化されたCSSに含まれるものをどこにも言及していないものを「修正」するために、かなり多くの追加のCSSがあります。私の意見では、特に標準のcssが！importantを使用する時間数については、彼らはこれを説明するのが苦手です。

また、ThemeRollerはデフォルトとしてemを使用します。これは、他の場所で設定されたフォントの％です。

とにかく、日付はリンクなので、日付を小さくするには、約9pxのサイズを設定します。

Jqueryを使用する前に、次のことを行います。

h1 {font-size:10px;}
h2 {font-size:11px;}
h3 {font-size:11px;}
p {font-size:11px;}
a {font-size:11px;}
2
Half_Duplex

CSS宣言にjquery-ui.cssを含めていますか？

また、サンプルページのCSSには、一連のfont-size宣言があります。

1
seth

本体のフォントサイズは10ptです。 Firebugでこれを削除すると、ページに表示されているのと同じフォントサイズが表示されます。

1
redsquare