jQuery UI内联数据报警器自动调整到父容器的大小
jQuery UI内联数据报警器自动调整到父容器的大小
提问于 2012-09-25 10:51:54
我正在使用twitters引导的响应网格系统和jquery数据报警器。我在'row'，'spanX‘结构中有一个内联数据报警器，如下所示：
<div class="row">
<div class="span3 widget">
<div id="datepicker"></div>
</div>
...
</div>
jQuery('#datepicker').datepicker({
inline: true,
...
})建议的调整Datepicker小部件大小的方法是重写字体大小。但是，如果我希望在窗口调整大小或不同分辨率时，根据spanX父容器的大小来保持数据报头大小，这就没有多大帮助了。
是否有一种优雅的方法可以将内联的数据报警器保持在父容器的100%宽度和高度？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-09 14:15:43
试着做这样的事情：
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'});
}
}
}它为引导所做的每个响应转换提供一个预设的大小。
Stack Overflow用户
发布于 2013-02-07 00:59:57
这是关于沙斯的
your-container{
.ui-datepicker {
width: 99%;
padding: 0;
}
.ui-widget {
font-size: 0.9em;
}
.ui-datepicker table {
font-size: 0.7em;
}
}您可以更改值，直到您看到字体大小，填充和宽度您喜欢。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12581462
复制相关文章
相似问题
腾讯云开发者
