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

我使用响应式网格系统的twitters bootstrap与jquery ui datepicker一起使用。我有一个“行”，“SPANX”结构内的内联日期选择器像这样：jQuery UI内联Datepicker自动调整大小到父容器

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

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

用于调整的日期选择窗口小部件所建议的方法是通过重写字体大小。但是这不是非常有用，如果我想保持日期选择器的大小取决于窗口调整大小或不同分辨率时的大小的spanX父容器。

是否有一个优雅的方式来保持内联日期选择器在父容器的宽度为100％时的高度？

来源

2012-09-25 olokki

尝试这样：

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-09 14:15:43 lokira

谢谢巴迪;）你解决了我的问题 –

这是sass

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

，直到你看到的字体大小，边距和宽度您可以随意更改值。

来源

2013-02-07 00:59:57 juanpastas

伟大的作品。也可以使用'less'。在'你的容器'上加一个'max-width：'，这样它就不会太宽。 – bendytree

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

回答

相关问题