web-dev-qa-db-ja.com

jQueryDatePickerが大きすぎます

JQueryのdatepickerを実装しました。正常に動作しているようですが、カレンダーが大きすぎます。

jQuery Datepicker http://www.softcircuits.com/Client/datepicker.png

私が取り組んでいるサイトには、スタイルシートと親ページおよびコントロールの多くのレイヤーがあります。そして、私はそれを大きくしているものを分離することができないようです。 （申し訳ありませんが、このサイトは公開されていません。）

カレンダーはフォントサイズに基づいているようです。テキストボックスを小さいフォントのdivでラップしようとしましたが、それを無視しているようです。固定フォントサイズを指定する方法はありますか？

jquery-uidatepickerjquery-ui-datepicker
16
Jonathan Wood

.ui-widgetのフォントサイズを変更すると、次のように最高の結果が得られました。

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

これは私が必要としていることを正確に実行しているように見えるだけでなく、他のjquery-uiウィジェットに影響を与える可能性も低いです。

25
Jonathan Wood

設定してみてくださいfont-size 授業のために .ui-datepicker

.ui-datepicker {font-size:11px;}

http://jsfiddle.net/pxfunc/ps5cA/

7
MikeM

これをsite.cssに追加するとうまくいきました

.ui-widget {
    font-size: .7em !important;
  }
2
Lav

Firebugを掘り下げる必要がありますが、それを減らすために使用するバージョンの1つを含めました。重要なのは、jQuery-ui CSSファイルから正確なスタイルをコピーして、必要なページの先頭、またはjQuery-uiスタイルシートの後のCSSスタイルシートに配置することです。

.ui-datepicker {
    padding: 0.1em 0.1em 0;
    width: 11em;
}

.ui-widget {
    font-family: Helvetica,Arial,sans-serif;
    font-size: 14px;
}

.ui-datepicker th {
    border: 0 none;
    font-weight: normal;
    padding: 0.2em 0.1em;
    text-align: center;
}

.ui-datepicker th span {
    font-size: 11px;
}

.ui-datepicker td span, .ui-datepicker td a {
    padding: 0.1em;
}

.ui-datepicker td {
    padding: 0.9px;
}

.ui-datepicker .ui-state-highlight {
    height: 12px;
    margin-bottom: 0;
}

.ui-state-default, .ui-widget-content .ui-state-default, 
.ui-widget-header .ui-state-default {
    font-size: 10px;
    font-weight: normal;
    text-align: center;
}

.ui-datepicker .ui-datepicker-title {
    line-height: 13px;
}

.ui-datepicker .ui-datepicker-title span {
    font-size: 11px;
}

.ui-datepicker .ui-datepicker-prev span, 
.ui-datepicker .ui-datepicker-next span {
    margin-left: -8px;
    margin-top: -8px;
}

.ui-datepicker .ui-datepicker-prev, 
.ui-datepicker .ui-datepicker-next {
    height: 15px;
    top: 1px;
    width: 15px;
}

.ui-datepicker-next-hover .ui-icon {
    height: 16px;
    width: 16px;
}
2
Bobby Borszich

「jquery-ui-1.10.4.custom.css」は次のように変更できます

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

Mdmullinaxに同意します。クラス全体のフォントサイズを変更する必要があります

.ui-datepicker-div {font-size：11px; }

datepickerはidによって制御されないため、以下の変更はサイズに影響を与えません

ui-datepicker-div {font-size：11px; }

h

0
aamir