Question

I’m using the jQuery DatePicker control for the first time. I’ve got it working on my form, but it’s about twice as big as I would like, and about 1.5 times as big as the demo on the jQuery UI page. Is there some simple setting I’m missing to control the size?

Edit: I found a clue, but it opens up new problems. In the CSS file, it states the component will scale according to the parent element’s font size. They recommend setting

body {font-size: 62.5%;} 

to make 1em = 10px. Doing this gives me a nicely sized datepicker, but obviously it messes up the rest of my site (I currently have font-size: .9em).

I tried throwing a DIV around my text box and setting its font size, but it seems to ignore that. So there must be some way to shrink the datepicker by changing the font of its parent, but how do I do that without messing up the rest of my site?

Answer 1

You don’t have to change it in the jquery-ui css file (it can be confusing if you change the default files), it is enough if you add

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

in a stylesheet loaded after the ui-files

div.ui-datepicker is needed in case ui-widget is mentioned after ui-datepicker in the declaration