调整jquery-ui datepicker的大小会使它错位

Question

我正在使用jquery-ui向表单添加日期选择器。

表格看起来像这样

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

我添加了日期选择器，但它太大

所以我添加了这一行来调整它的大小

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

虽然有效但有问题。 datepicker现在隐藏了表单。

如何将日期选择器的顶部与字段底部对齐，如前所述。

Answer 1

参考此链接：

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

http://quickwiki.com/How_to_resize_jQuery_datepicker_calendar_size

Answer 2

请参阅：How to resize the jQuery DatePicker control

您需要在jq-ui css文件的末尾添加该样式定义。

所以把它放在最后：

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

Answer 3

你能使用！important属性吗？

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

你试过这个吗？可能不是你想要的，但我对结果很好奇^^

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

Answer 4

添加此代码：

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