jQuery यूआई इनलाइन डेटपिकर मूल कंटेनर

Question

पर ऑटो-आकार बदलें I jquery ui datepicker के साथ twitters बूटस्ट्रैप के उत्तरदायी ग्रिड सिस्टम का उपयोग कर रहा हूं। मैं बहुत की तरह एक 'पंक्ति', 'spanX' संरचना के भीतर एक इनलाइन datepicker है:

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

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

Datepicker विजेट का आकार बदलने के लिए सुझाव दिया जिस तरह से font-size अधिभावी कर रहा है। हालांकि यह बहुत उपयोगी नहीं है अगर मैं डेटपिकर आकार को spanX पैरेंट कंटेनर के आकार पर निर्भर रखना चाहता हूं, जबकि खिड़की का आकार बदल रहा है या विभिन्न संकल्पों के लिए।

क्या को डेटपिकर 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; 
    } 
} 

साथ जब तक तुम font-size, गद्दी देखते हैं, और आप की तरह चौड़ाई आप मूल्यों को बदल सकते है।