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

它有效，但出现了问题。日期选择器现在隐藏了表单。

我怎样才能像以前一样定位它，日期选择器的顶部与字段底部对齐。

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>