Giao diện người dùng jQuery nội tuyến Datepicker tự động đổi kích thước thành vùng chứa cha mẹ

Question

Tôi đang sử dụng hệ thống lưới đáp ứng của twitters bootstrap cùng với jquery ui datepicker. Tôi có một inline datepicker bên trong một 'hàng', 'Spanx' cấu trúc như sau:

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

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

Cách gợi ý cho thay đổi kích thước widget datepicker là bằng cách ghi đè font-size. Tuy nhiên điều này không phải là rất hữu ích nếu tôi muốn giữ kích thước Datepicker phụ thuộc vào kích thước của thùng chứa cha mẹ spanX trong khi cửa sổ thay đổi kích thước hoặc cho các độ phân giải khác nhau.

Có cách nào thanh lịch để giữ được gạch ngang Trình ghi ngày tháng ở chiều rộng 100%, chiều cao của vùng chứa gốc không?

Answer 1

thử một cái gì đó như thế này:

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

} 

Nó mang đến cho bạn một kích thước định sẵn cho mỗi bootstrap chuyển đổi phản ứng làm.

Answer 2

Đây là với sass

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

Bạn có thể thay đổi giá trị cho đến khi bạn nhìn thấy font-size, đệm, và chiều rộng bạn muốn.