web-dev-qa-db-ja.com

jQuery UIカレンダーの表示が大きすぎます。デモサイズが必要ですか？

そこで、jQuery用のカスタムテーマのUIをダウンロードし、カレンダーコントロールをサイトに追加しました（例： リンクテキスト ）。この例では、希望するサイズが表示/表示されていますが、私のWebページでは約2倍のサイズです。なぜ？？？

他にもたくさんのCSSがありますが、ページのルックアンドフィールを制御できません（現在のCSSに触れられません、MEH !!）。私のサイトでデモを表示する方法はありますか？

これはjQuery UIが持っているコードで複雑になるかもしれないと思います

/* Component containers
----------------------------------*/
.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1em; }
.ui-widget-content { border: 1px solid #B9C4CE; background: #ffffff url(../images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x; color: #616161; }
.ui-widget-content a { color: #616161; }
.ui-widget-header { border: 1px solid #467AA7; background: #467AA7 url(../images/ui-bg_highlight-soft_75_467AA7_1x100.png) 50% 50% repeat-x; color: #fff; font-weight: bold; }
.ui-widget-header a { color: #fff; }

カスタムUI CSSの一部です

jqueryuser-interfacejquery-ui
35
Phill Pafford

私はそれを考え出した。フォントサイズのせいで、すべてがうまくいっていません。このタグを追加して、希望するサイズを正しく表示しました。

#ui-datepicker-div { font-size: 12px; }

他の誰かがこのようなものを必要とする場合にうまく機能します

67
Phill Pafford
.ui-widget{ font-size: 0.8em; }

それが解決策ですが、私が知らなかったのは、次のようにそれをhead要素に入れるかどうかです。

<style type="text/css">
.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }
</style>

他の設定を上書きしますなので、Googleがホストするcssを引き続きロードできますが、これを使用して上書きします=）

9
gideon

カレンダーコントロールのサイズを修正するには、次のように変更します。

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 1.1 em; }

これに：

.ui-widget { font-family: Lucida Grande, Lucida Sans, Arial, sans-serif; font-size: 0.8em; }

詳細な手順については、- http://blog.greatdevelopers.com/?p= をご覧ください。

8
Shekhar Agarwal

JQueryのすべてのウィジェットのフォントサイズまたはフォントファミリーを設定する場合は、次のように設定することをお勧めします。

.ui-widget {
    font-size: .7em;
}

jQuery UI CSSファイルをロードする呼び出しの後。

すべてのjQuery UIコンポーネントはウィジェットであり、トップレベルで.ui-widgetスタイルを継承します。

5
Harish

CSSズームを使用する

.ui-widget{ 
    -ms-transform: translate(-15%,-15%) scale(0.7);//translate must be before scale
    -moz-transform: translate(-15%,-15%) scale(0.7);
    -webkit-transform: translate(-15%,-15%) scale(0.7);
    transform: translate(-15%,-15%) scale(0.7);
}

上記のコードでは、「sclale（0.7）」を使用しています。これは、新しい幅と高さが元の値の70％になることを意味します。変換後の要素は元の要素の中心が同じになるため、幅を30％削減します。つまり、左から15％、15％削減します。右から、身長も同じです。したがって、新しい要素を左上に移動するには、translateを使用する必要があります。 「translate」は「scale」の前でなければならないので、「15％」は元の幅（つまり、スケーリングする前）の15％であり、変換後の新しい幅ではありません。

enter image description here

1
Billel Hacaine

DOMインスペクター（Firebug、IE開発者ツールバーなど）は、どのCSSスタイルがカレンダーに影響を与えているかを判断するのに役立ちます。

おそらく、CSSに触れることを禁止している当事者がいれば、コンテナ内で自由に統治できるでしょうか？つまり、

<div id="foo">Your stuff goes here. All your selectors must start with #foo</div>

そうでない場合は、明らかにJSを制御できます。これでインラインスタイルを記述できるはずです。

編集

また、コンテンツをiframeでラップできるかどうかも確認できます。

1
steamer25

使用をお勧めします

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

使用する代わりに

#ui-datepicker-div { font-size:10px !important; }

cssクラスセレクターのスコープは、特定の要素専用の要素セレクターを使用する場合よりも広いためです。クラス型の別のhtml要素を作成するだけで、何も心配する必要はありません。

ただし、問題では、jquery-uiのファイルではなく、独自のcssファイルにクラスセレクターを追加するだけで何もする必要はありません。別の日付ピッカーを作成する必要がある場合、心配する必要はありません。この方法でCSSを再度変更します。

1
A Malik

カレンダーを小さくするために、CSSにさらにいくつかの変更を加える必要がありました。
他の人がすでに述べたように、ページ内のスタイルタグに次の行を追加しました（そのため、サイトの他のすべての日付ピッカーには影響しません）

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

しかし、これはタイトルのサイズを小さくしただけです（月年）。曜日ラベルと曜日番号を小さくするために、jquery-ui-1.8.18.custom.cssから次の2行もコピーして自分のページに配置する必要がありましたが、その後、フォントも追加する必要がありました。 -両方のサイズ仕様。

.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0;}
.ui-datepicker td { border: 0; padding: 1px; }

だから私が終わったのは次のとおりです：

<style type="text/css">
div.ui-datepicker{ font-size:7px;}
.ui-datepicker th { padding: .7em .3em; text-align: center; font-weight: bold; border: 0; font-size: 1.6em;}
.ui-datepicker td { border: 0; padding: 1px; font-size: 1.6em;}
</style>

これにより、日付と年、曜日ラベル、日付番号のフォントサイズを制御できます。

1
Vincent

ページにcssの競合がないことを確認してください。たとえば、html/bodyまたはコンテナのフォントサイズ設定がカレンダーに流れ込む可能性があります。

0
ScottE

あなたが望むどんなサイズでもCSSでこの行を編集することで設定できます。

.ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 1.1em; }

.5emや.8emなどの別のフォントサイズを指定するだけです

 .ui-widget { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: .5em; }

それはうまくいきます、私はそれをしません。

0
Praveen kumar Agrawal

私はたまたまこれを見つけましたが、ドキュメントにDOCTYPE htmlを追加してみてください

<!DOCTYPE html>
<html>
    <body>
    </body>
</html>

開始htmlタグの前。

0
Michael

これは簡単です。jquery-uiはオブジェクトスタイルを使用して仕事をします。というのは ：

<html>
   <body
     <input type="text" id="date"/>
     <script type="text/javascript"> $("#date").datepicker()</script>
   </body>
</html>

日付番号とムント名のサイズは、$（ "＃date"）。css（ "font-size"）の関数で設定されます。したがって、入力のfont-sizeが6pxの場合、datepickerは小さく見えます。 font-sizeが42ptの場合、ブラインドの日付ピッカーになります。

0
N Joly