jQuery DatePicker Too Large

Question

I've implemented the jQuery datepicker. It seems to be working fine but the calendar is too large.

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

The site I'm working on has many layers of stylesheets and parent pages and controls. And I don't seem to be able to isolate what is making it large. (Sorry, the site isn't public.)

It appears the calendar is based on a font size. I tried wrapping my textbox in a div with a smaller font but it seems to ignore that. Is there any way to specify a fixed font size?

Answer 1

While changing the font size for .ui-widget works, I got the best results with the following.

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

Not only does this seem to do exactly what I need, it is also unlikely to impact any other jquery-ui widgets.

Answer 2

you can change "jquery-ui-1.10.4.custom.css" as follows

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

Answer 3

I agree with mdmullinax. You have to change the font size for the whole class

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

because datepicker is not controlled by id so below change has no impact on size

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

h

Answer 4

It takes some digging in firebug but I have included one of the versions I use to reduce it. The key is to copy the exact styles from the jQuery-ui CSS file and put them in the head of the page you need them or in a CSS style sheet after the jQuery-ui style sheet.

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

Answer 5

Our calendar was big and ugly looking with hard to click month arrows. It was caused by mismatching versions of the jquery-ui css and jquery-ui js includes.

version numbers must match e.g.

jquery-ui-1.10.3.custom.min.css
jquery-ui-1.10.3.custom.min.js

but also needed the css recommended above

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

Answer 6

try setting font-size for class .ui-datepicker

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

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