備忘技術分享

jquery ui 1.7版中的datepicker大小問題

可能已經有前輩或神人們已經有遇到並解決..但我google了一下…沒有人分享..所以我就班門弄斧囉!!

在官方下載ui回來用之後,的確很強大很好用!
但有沒有發現..在官方的demo 頁中..datepicker的大小是很適中的…
但是一旦自己加入自己的程式碼中…就變的超大…

原因是在官方的css檔中..有個地方影响了datepicker的大小
body {
font-size: 62.5%;

}

是的..兇手就是這一段..

如果你原本的程式碼也有相關的格式..那麼你的datepicker就會受到這段的影响!

解決方法..

找出你所使用的theme path 如“css/redmond/jquery-ui-1.7.custom.css”==>如果你是官網上自訂
theme配色可能路徑就不同囉~~~別找錯檔!

找到
.ui-datepicker { width: 17em; padding: .2em .2em 0;}
改成
.ui-datepicker { width: 17em; padding: .2em .2em 0; font-size: 指定大小;}
就可以囉~~~

for English version:

I’ve got a datepicker problem. I am having is adjusting the size of
the datepicker.  If I run the demo of the datepicker that is included
in the dev bundle, the datepicker shows up at a reasonable size.  If I
run the datepicker on my test page, it is HUGE!  So I check the css
and found the one tag that seems to make the difference.  The body tag

body {
font-size: 62.5%;

}

So I put that in my
test page and now the datepicker is back to a reasonable size.

So find the path you use in your environment!
your theme path should like this“css/redmond/jquery-ui-1.7.custom.css”

and find the section

.ui-datepicker { width: 17em; padding: .2em .2em 0;}
modify it to

.ui-datepicker { width: 17em; padding: .2em .2em 0; font-size: the size you want;}

It should work now!!!^_^