7

我正在使用 twitters bootstrap 的响应式网格系统和 jquery ui datepicker。我在“行”、“spanX”结构中有一个内联日期选择器，如下所示：

<div class="row">      
<div class="span3 widget">      
<div id="datepicker"></div>
</div>
...
</div>

jQuery('#datepicker').datepicker({
inline: true,
    ...
})

调整 Datepicker 小部件大小的建议方法是覆盖字体大小。但是，如果我想在窗口调整大小或不同分辨率时使 Datepicker 大小取决于 spanX 父容器的大小，这不是很有帮助。

有没有一种优雅的方法可以将内联的Datepicker 保持在父容器的 100% 宽度和高度？

4

2 回答 2

3

尝试这样的事情：

function datepResize() {

    // Get width of parent container
    var width = jQuery("#calendar").width(); //attr('clientWidth');
    if (width == null || width < 1){
        // For IE, revert to offsetWidth if necessary
        width = jQuery("#calendar").attr('offsetWidth');
    }
    width = width - 2; // Fudge factor to prevent horizontal scrollbars
    if (width > 0 &&
        // Only resize if new width exceeds a minimal threshold
        // Fixes IE issue with in-place resizing when mousing-over frame bars
        Math.abs(width - jQuery("div ui-datepicker").width()) > 5)
    {
        if (width < 166){
            jQuery("div.ui-datepicker").css({'font-size': '8px'});
            jQuery(".ui-datepicker td .ui-state-default").css({'padding':'0px','font-size': '6px'});
        }
        else if (width > 228){
            jQuery("div.ui-datepicker").css({'font-size': '13px'});
            jQuery(".ui-datepicker td .ui-state-default").css({'padding':'5px','font-size': '100%'});

        }
        else{
            jQuery("div.ui-datepicker").css({'font-size': (width-43)/16+'px'});
        }
    }

}

它为引导程序所做的每个响应转换提供了预设大小。

于 2012-12-09T14:15:43.373 回答
2

这是sass

your-container{
  .ui-datepicker {
    width: 99%;
    padding: 0;
  }
  .ui-widget {
    font-size: 0.9em;
  }
  .ui-datepicker table {
    font-size: 0.7em;
  }
}

您可以更改值，直到看到您喜欢的字体大小、填充和宽度。

于 2013-02-07T00:59:57.227 回答