jQuery UI datepicker style for a smaller display


I have a jquery ui datepicker on the right of the page:

which shows a calendar.

I could make it small with the statement:

width:auto ! important;

But I’d like to make it even slightly more smaller… as you can see it eats on the right border as it is now…




Add margin to generate the space around it…

.ui-datepicker-inline {
    margin: 5px;
    width: auto !important;


Thanks for the suggestion, but it didn’t make any difference.

Also, I’m trying to have the cells a bit smaller, not larger, and I don’t know if adding a margin is leading in that direction.

Am I understanding you right ?

Thanks again.


Sorry but I’m a bit confused, one with the fact that the 1st reply in this thread mentions a “[LEFT][COLOR=#464646]ui-datepicker-inline” class, however besides having that in the CSS, there isn’t any mention of that in the HTML.

Secondly, do you want the TABLE to be smaller, or the cells. If the cells, I would think that any smaller would be extremely hard to read. It’s already borderline for me. I don’t see any “right border” being “eaten” :).[/COLOR][/LEFT]

The ui-datepicker-inline class name is one being used by the datepicker widget. So I don’t have it in my own html. It is coming from the datepicker widget.

It did a good job of reducing the width of the datepicker widget which was way too large before.

But it is still slightly too large now.

I took a snapshot of the right border, and it doesn’t look as nice as the left one.

My idea was to have each day cell smaller by a pixel maybe, so as to have the whole datepicker widget smaller.

But I can’t figure it out.

What browser is that screenshot from as I’m not seeing an overlap in any of my browsers (unless you fixed it already)?

I’m the same as Paul (and always has been) :).

Also, what OS are you on?


Add margin to the span inside td which is holding the background image of each cell.

.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default{
 margin: 1px;

Please keep posted if you want add margin-right for the last cell of each row, I could you help you to achieve that with jQuery.

FYI - It’s working fine in firefox, IE7 and IE8, above change is not require for these browser with XP.

Raghavender Reddy


I’m using Firefox on the latest Linux Mint 12

This on a 12’’ Thinkpad X60

If all of you see it fine then maybe I should just leave it as is…

Thanks for your feedback !