JQuery UI inline Datepicker automatically resizes to parent container

Question

I am using twitters responsive grid bootstrap system along with jquery ui datepicker. I have an inline datepicker parameter inside a 'row', 'spanX' structure, for example:

<div class="row"> <div class="span3 widget"> <div id="datepicker"></div> </div> ... </div> jQuery('#datepicker').datepicker({ inline: true, ... }) 

A suggested way to resize a Datepicker widget is to override the font size. However, this is not very useful if I want the size of the Datepicker to depend on the size of the spanX parent container when the window is resized or for different resolutions.

Is there an elegant way to keep the built-in Datepicker with 100% width, height of the parent container?

Answer 1

try something like this:

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

It gives you a predefined size for each download conversion reaction.

Answer 2

This is with sass

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

You can change the values ​​until you see the font size, indentation and width that you like.