Question

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

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

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

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

是否有一种优雅的方法可以将内联 Datepicker保持在100％宽度，父容器的高度？

Answer 1

尝试这样的事情：

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'});
        }
    }

}

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

Answer 2

这是sass

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

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

jQuery UI内联Datepicker自动调整大小到父容器

2 个答案: