Resizing jquery-ui datepicker misplaces it

Question

I am using jquery-ui to add a date-picker to a form.

The form looks like this

<table>
<tr>
 <td class="c1"><input class="datepicker" type="text" name='date'/></td>
 <td class="c2"><input type="text" name='heading'/></td>
 <td class="c3"><input type="text" name='comments'/></td>
</tr>
</table>

I added the date-picker but it was too huge

So I added this line to resize it

<style media=\"screen\" type=\"text/css\">
 .ui-datepicker{
  font-size:12px;
 }
</style>

It worked but there was a problem. The datepicker now hides the form.

How can I position it as before with the date-picker's top aligned to the fields bottom.

Answer 1

Ref this link:

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

http://quickwiki.com/How_to_resize_jQuery_datepicker_calendar_size

Answer 2

Add this code :

<style type="text/css">
 table.post-meta tr, td {
 font-size:7px; 
}
</style>
<script type="text/javascript">
$(function() { 
        $( "#datepicker " ).datepicker( );
        $("#datepicker   .ui-datepicker").css({"font-size":"7px"}); 
         $("#datepicker   .ui-datepicker a").css({"font-size":"7px"}); 
    });
</script>

Answer 3

Can you use an !important attribute?

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

And have you tried this? Probably not what you want but I'm curious for the result ^^

$( ".selector" ).datepicker({ autoSize: true });

Answer 4

See this: How to resize the jQuery DatePicker control

You need to add that style definition at the end of the jq-ui css file.

So put this at the end:

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