Календарът на jQuery UI се показва твърде голям, искате ли демонстрационния размер?

Разбрах го. Размерът на шрифта беше този, който отхвърляше всичко. Добавих този етикет, за да покажа правилно размера, който исках:

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

Работи чудесно, ако някой друг има нужда от нещо подобно

.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, но използвайте това, за да го отмените =)

За да коригирате размера на контролата на календара, променете това:

.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=33

Ако искате да зададете размер на шрифта или семейство шрифтове за всички джаджи на jQuery, би било по-добре да зададете нещо подобно:

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

след извикването за зареждане на jQuery UI CSS файлове.

Всички компоненти на потребителския интерфейс на jQuery са уиджети и наследяват стила .ui-widget на най-високо ниво.

DOM инспектор (напр. Firebug, IE Developer Toolbar и т.н.) трябва да ви помогне да определите кои CSS стилове засягат вашия календар.

Може би която и страна да ви забранява да докосвате CSS, ще ви позволи да управлявате свободно в контейнер? т.е.

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

Ако не, вие очевидно имате контрол над JS. Трябва да можете да пишете вградени стилове с това.

РЕДАКТИРАНЕ

Може също да видите дали можете да обвиете съдържанието си във вградена рамка.

За да направя календара си по-малък, трябваше да направя още няколко промени в css.
Както някои други хора вече споменаха, добавих следния ред към етикет за стил в моята страница (така че не засяга всички другите инструменти за избор на дати на моя сайт)

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

Но това само направи размера на заглавието по-малък (месец година). За да направя етикетите на дните от седмицата и номерата на дните по-малки, трябваше също да копирам следните два реда от jquery-ui-1.8.18.custom.css и да ги поставя в моята страница, но след това трябваше да добавя и шрифта - спецификации на размера и за двете.

.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>

Това ми позволява да контролирам размера на шрифта за дата и година, етикети за дни от седмицата и номера на дати.

Ще ви препоръчам да използвате

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

вместо да използвате

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

тъй като селекторите на клас css имат по-широк обхват в сравнение с използването на селектори на елементи, които са само за конкретен елемент. Всичко, което трябва да направите, е да създадете друг html елемент от типа class и не е нужно да се притеснявате за абсолютно нищо.

Във вашия проблем обаче не е нужно да правите нищо, просто добавете селектора на клас към вашия собствен css файл, НЕ този за jquery-ui, и сте подредени, ако трябва да създадете друг избор на дати, няма да се притеснявате модифициране на css отново по този начин.

Използвайте 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" трябва да е преди "scale", така че "15%" ще бъде 15% от оригиналната ширина (т.е. преди да мащабираме), а не от новата ширина след трансформацията.

Проверете дали нямате css конфликти на вашата страница - например html/body или настройки за размер на шрифта на контейнера, които ще се прехвърлят надолу към календара.

Какъвто и размер да искате, можете да зададете, като редактирате този ред в 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; }

Ще работи, нямам го.

Това е просто: Jquery-ui просто върши работата си, използвайки обектен стил. Имам предвид :

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

Размерът на номера на датата и името на месеца ще бъде зададен в зависимост от: $("#date").css("font-size"). Така че, ако входът има 6px като размер на шрифта, инструментът за избор на дата ще изглежда малък. Ако размерът на шрифта е 42pt, това ще бъде избор на дата на сляпо!

Случайно попаднах на това, но опитайте да добавите DOCTYPE html към вашия документ

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

преди вашия отварящ html таг.