7

私は、Twitterブートストラップのレスポンシブグリッドシステムをjqueryuidatepickerと一緒に使用しています。'row'、'spanX'構造の中にインライン日付ピッカーがあります：

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

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

Datepickerウィジェットのサイズを変更するための推奨される方法は、font-sizeをオーバーライドすることです。ただし、ウィンドウのサイズ変更中または解像度が異なる場合に、DatepickerのサイズをspanXの親コンテナーのサイズに依存させたい場合、これはあまり役に立ちません。

インライン化されたDatepickerを親コンテナの100％の幅、高さに保つためのエレガントな方法はありますか？

4

2 に答える 2

3

次のようなものを試してください：

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-09T14:15:43.373 に答える
2

これはサス付きです

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

好みのフォントサイズ、パディング、幅が表示されるまで値を変更できます。

于 2013-02-07T00:59:57.227 に答える